如何在 Bootstrap 中水平居中表格

2024-04-24

这是我的代码。我想做的是将这张桌子放在容器的中心。但相反,当我使用“容器”类时,它默认向左对齐,并且当我对 div 使用“容器流体类”时,它使用全宽度。我想将桌子水平居中。有人可以帮忙吗?

<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped">
<thead><tr>
<th>Material Name</th>
<th>Rate (INR)</th>
</tr>
</thead>
<tbody style="">
<tr>
<td>Books</td>
<td>7.00(per KG)</td>

</tr>
<tr>
<td>Soft Plastic</td>
<td>15.00(per KG)</td>

</tr>
<tr>
<td>Hard Plastic</td>
<td>2.00(per KG)</td>

</tr>
</tbody>
</table>
<div>

这是一个屏幕截图。

我知道“container-fluid”使用全宽度,但我也只使用了“container”类,但它没有帮助。请指教。


无论表格或屏幕的大小如何,都可以使用此 Bootstrap 行/列组合,无需 CSS:

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Bootstrap 中水平居中表格 的相关文章

  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 为什么 HTML5 DOCTYPE 会扰乱我的填充?

    我有一个带有导航栏的 html5 页面 完全从头开始编码 我最近刚刚向该项目添加了一个文档类型 现在我在导航栏下获得了额外的空间 如果我删除文档类型声明 它就会恢复正常 我已经完全重置了所有内容的填充 边距等 并将其缩减为说明问题的少量代码
  • 一行总结详细信息? [复制]

    这个问题在这里已经有答案了 我希望页脚内的详细信息成行显示 现在每个详细信息都显示在新行上 我怎样才能让它与 CSS 一起工作
  • 我可以使用 CSS 或脚本设置禁用控件的样式吗?

    我有一个 HTMLdiv页面上的元素在以下情况下更新select页面上的元素发生变化 有时 input需要根据选择禁用标签 文本框 问题是 项目涉众喜欢该功能 他们只是认为在 禁用 状态下 文本框内容太浅 因此不可读 我可以将 CSS 应用
  • 隐藏滚动条,但仍然可以滚动

    我希望能够滚动整个页面 但不显示滚动条 在谷歌浏览器中它是 webkit scrollbar display none 但 Mozilla Firefox 和 Internet Explorer 似乎不是这样工作的 我也在 CSS 中尝试过
  • css 表格单元格,内容有不必要的上边距

    我在代码中使用 div 块的表格单元格排列 我的代码有问题 我的 html 的预览是here http jsbin com avozik 10 edit preview 当我的第一个面板中有任何内容 文本或图像 时 inner第二个和第三个
  • Javascript - window.getCompulatedStyle 返回“auto”作为元素顶部和左侧属性

    在我的网页上 我有一些元素 div 子 div 按钮等 其位置是相对于它们所在的 div 以及彼此之间生成的 这会导致使用时的结果window getCompatedStyle the top and left属性不是数字值 而是简单的 a
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • PHP/HTML - 如何在表单输入名称中保留空格?

    我有一个带有输入的表单type text和name属性中有空格 当表单提交时 它使用post 空格怎么保留 目前是用下划线替换空格 在输入名称中使用数组
  • Firefox 30 不再隐藏选择框箭头

    我一直使用的 技巧 是 select moz appearance none text indent 0 01px text overflow 在 FF 上进行自定义选择框 但自从版本 30 发布以来 它完全停止工作 我试图找出这是否已被弃
  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number
  • 角度按钮单击旋转图标

    我有以下按钮
  • CakePHP 与 Bootstrap(来自 Twitter)

    我是 CakePHP 的新手 我想知道一种在与蛋糕结合的布局中使用 Twitter 的 Bootstrap 的方法 我主要关心的是让 Form Helper 继续正常运行 因为我认为它使用预先配置的 CSS 类 如果我更改默认的 css 我
  • PHP 在数组内循环

    我怎样才能在一个内部循环array在我的代码中 这是我的脚本的静态版本 val array array value gt Male label gt Male array value gt Female label gt Femal my
  • 在 jQuery 中获取最接近元素的形式

    我编写了这个 js jquery 脚本来检查表单中的所有复选框 它工作得很好 但是这会检查页面上的所有复选框 无论它们是什么表单包装器 这是函数 function toggleCheck state var checkboxes jQuer
  • 从选择控件 html 复制所选项目的文本

    我有一个带有预定义值的选择控件 我希望我的用户能够使用 CTRL C 复制所选项目的文本 我不希望他们能够更改项目的文本 只需用鼠标 键盘选择它 这是一个显示问题的小提琴 我无法选择所选项目的文本 http jsfiddle net 5C3
  • 为什么 JDOM 的 getChild() 方法返回 null?

    我正在做一个关于 html 文档操作的项目 我想要现有 html 文档中的正文内容将其修改为新的 html 现在我正在使用 JDOM 我想在我的编码中使用 body 元素 为此 我在编码中使用了 getChild body 但它向我的程序返

随机推荐

  • 为什么 getView 在分离列表适配器上返回错误的 ConvertView 对象?

    我根据自己的需要改编了 Jeff Sharkey 的分离列表适配器 SeparatedListAdapter 得到了如下结果 public class SeparatedListAdapter
  • 如何在CSS中使div背景颜色透明

    我没有使用CSS3 所以我不能使用opacity or filter属性 如果不使用这些属性 我怎样才能使background color透明的一个div 它应该是这样的文本框示例link http www w3schools com cs
  • 在 Django 中创建员工用户

    我正在尝试在 Django 中创建一个员工用户 UserModel objects create user username A email email protected cdn cgi l email protection passwo
  • Android appcompat-v7:21.0.0 更改材质复选框颜色

    我已经更新了我的项目以使用最新的 appcompat 支持库 新版本使用材料设计复选框和单选按钮 我的应用程序是深色主题 复选框是黑色的 很难看到 我正在尝试根据以下内容更改它们的颜色保持兼容性 https developer androi
  • 存储过程中的条件 WHERE 子句

    这个问题可能归结为更简单的问题 但我仍然很好奇 SQL Server TSQL 能有多接近条件WHERE条款 以及为什么它们不存在背后的推理也很有趣 我有一个存储过程 对于一些参数 它接受一个枚举数组 它已相应地转换为用户定义的表类型 它本
  • 如果值包含逗号字符,如何使用 QSetting 读取值[重复]

    这个问题在这里已经有答案了 在我的 QT 项目中 我使用 QSettings 从 ini 文件读取值 如果该值包含逗号字符 QSettings 无法读取它 我应该如何读取这些值 逗号字符被视为列表分隔符QSettings 带逗号的 INI
  • 将关系 R 分解为 1NF 后最少存在多少张表?

    考虑具有以下属性类型的关系 R A B C D E F G 键总数 1 A 一组简单 或 原子 或 单值属性 B C 多值属性集 D E 复合属性集 F G 将关系 R 分解为 1NF 后 存在的表的最小数量是多少 A 3 B 2 C 4
  • 使用新文件名保存文件:附加到现有文件名

    有没有一种简单的方法 在 VIM 中 使用当前名称加上附加短语保存当前打开的文件 即 来自 home affert type vim data folder file1 txt 然后将文件另存为 data folder file1 txt
  • 在 Perl 中如何接受多个 TCP 连接?

    我对 Linux 的 Perl 脚本有疑问 它的主要目的是成为 3 个应用程序之间的中间人 它应该做什么 它应该能够等待 UDP 文本 不带空格 udp port 当它收到 UDP 文本时 它应该将其转发到连接的 TCP 客户端 问题是我的
  • 反序列化通用列表返回 null

    我正在反 序列化一个对象 如下所示 public class myClass ISerializable public List
  • 跨浏览器高度 100%(变换比例<1)

    我似乎无法找到一种方法使子容器的高度为父容器的 100 并且只能看到滚动条 相反 我们看到高度的空白量增加了一倍 这个问题与Javascript 放大 缩小到鼠标 x y 坐标 https stackoverflow com questio
  • 获取函数/类构造函数的参数类型

    我正在尝试做一些我不确定在 TypeScript 中是否可行的事情 从函数推断参数类型 返回类型 例如 function foo a string b number return a b type typeA
  • Visual Studio 2013 自动套用格式 (CTRL K D) cshtml 小写问题

    我最近才更新到 VS 2013 当使用 MVC 3 应用程序时 我遇到了自动格式化问题 即使用 CTRL K D 快捷键 或突出显示全部 格式选择 例如 model IEnumerable
  • pytesseract 无法按预期识别文本?

    我正在尝试通过 opencv 和 pytesseract 运行一个简单的车牌图像来获取文本 但我无法从中获取任何内容 按照此处的教程进行操作 https Circuitdigest com microcontroller projects
  • 如何从控制器调用构造函数中具有参数(接口)的属性

    public class HMACAuthenticationAttribute Attribute IAsyncAuthorizationFilter public HMACAuthenticationAttribute IUser us
  • Couchbase 无法 MutateIn 多个带有 null 值的 upserts

    我有一个 Couchbase 文档 我想在一次调用中改变多个属性 如果其中一个属性值为 null 则 mutate 会失败并显示以下消息 KV错误 名称 EINVAL 描述 无效数据包 属性 内部 无效输入 和状态 Couchbase IO
  • 如何在滚动 iPhone 上向 tableview 添加元素?

    我正在使用 UITableView 列出来自 Web 服务的元素 我需要做的是首先从Web服务调用20个元素并显示在列表中 当用户向下滚动时从Web服务调用另外20个记录并添加到表格视图 这个怎么做 您可以从 Web 服务加载 20 个项目
  • 如何防止视图将其模型传递给部分视图,而是传递 null?

    在 ASP NET MVC 和使用 Razor 中 我有一个视图 父视图 调用另一个视图 子视图 作为部分视图 两者都是强类型的 但它们具有不同的模型类型 通常 在这些情况下 我们会显式地将模型从父视图传递到子视图 Html Partial
  • 光标在 Google 地图应用程序中消失

    这确实很奇怪 使用 API v3 创建 Google 地图应用程序后 有时当我将光标悬停在地图上时 鼠标光标会消失 我需要与地图之外的几个控件进行交互 当我点击其中一个并且地图失去焦点后 问题就显现出来了 这事发生在别人身上过吗 我尝试将焦
  • 如何在 Bootstrap 中水平居中表格

    这是我的代码 我想做的是将这张桌子放在容器的中心 但相反 当我使用 容器 类时 它默认向左对齐 并且当我对 div 使用 容器流体类 时 它使用全宽度 我想将桌子水平居中 有人可以帮忙吗 div class container fluid