如何在 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 中水平居中表格 的相关文章

  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • HTML 属性 bgcolor 已弃用:用什么代替?

    VStudio ASP NET 给出以下消息 Attribute bgcolor is considered outdated A newer construct is recommended 推荐的结构是什么 bgcolor是在一个 td
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu
  • JavaScript 中带前导零的数字发生变化

    我使用 print 语句从 php 调用 javascript 函数来打印 html 代码 并且传入一个整数 但是 在 php 中传递的值与 javascript 函数接收到的数字不匹配 我不知道为什么 这是调用 javascript 函数
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作?

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则
  • 将 Bootstrap 与 Bower 一起使用

    我正在尝试将 Bootstrap 与 Bower 一起使用 但由于它克隆了整个存储库 因此没有 CSS 和其他内容 这是否意味着我需要在我自己的构建过程中包含构建 Bootstrap 或者如果我错了 正确的工作流程是什么 I finally
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 使用 HTML5(数据列表)自动完成功能和“包含”方法,而不仅仅是“开头为”

    我找不到它 但我又不知道如何搜索它 我想用
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • 如何使跨度标签不可删除?

    我正在尝试使 contenteditable div 内的跨度标记不可删除 div Editable span Read Only span div 只读范围确实是只读的 但我可以通过单击删除键来删除整个范围 有没有一种属性方法可以告诉sp
  • 电话输入自动填充会删除国际前缀

    我有一个类型为 tel 的输入字段 并启用了自动完成功能
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

  • 为什么 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