为啥 Twitter Bootstrap 表格总是有 100% 的宽度？

Posted 2023-03-05

【中文标题】为啥 Twitter Bootstrap 表格总是有 100% 的宽度？

【英文标题】：Why do Twitter Bootstrap tables always have 100% width?为什么 Twitter Bootstrap 表格总是有 100% 的宽度？

【发布时间】：2012-05-28 01:47:48

【问题描述】：

假设这个标记：

<table class="table table-bordered" align="center"> 

不知道我有多少单元格，表格总是 100% 宽度。为什么？

【问题讨论】：

因为它有效地利用了它的父宽度；这就是网格系统应该如何工作的！

您希望桌子的宽度是多少？

我希望它依赖于单元格的数量，就像普通的表格一样

对于那些搜索如何通过span检查设置单元格宽度如div宽度的人this answer

【参考方案1】：

引导程序中的所有表格都根据其容器进行拉伸，您可以通过将表格放置在您选择的 .span* 网格元素中轻松地做到这一点。如果您希望删除此属性，您可以创建自己的表格类，然后将其添加到您要扩展的表格中：

.table-nonfluid 
   width: auto !important;

您可以在自己的样式表中添加此类，然后将其添加到表格的容器中，如下所示：

<table class="table table-nonfluid"> ... </table>

这样您的更改不会影响引导样式表本身（您可能希望在文档的其他地方有一个流动表）。

【讨论】：

如果您将表格放在 span* 标签内，为了使表格居中，您是否也只包含一个偏移量*？

@dlackey 是的，你可以用一个类来偏移表格以便居中，你甚至可以在你的表格中添加一个.span* 类来给它一些宽度。

至少在 bootstrap 3 中它只在将 !important 添加到 width: auto 后才对我有用

table 必须使用 bootstarp 的 span 类，或者我们必须手动为 .span 类指定样式，

警告。如果与 .table-responsive 和 .table-bordered 结合使用，请小心。当屏幕宽度低于 767 像素时，边框将应用于 .table-responsive 容器。 （引导 3.x）

【参考方案2】：

<table style="width: auto;" ... 工作正常。在 Chrome 38、IE 11 和 Firefox 34 中测试。

jsfiddle：http://jsfiddle.net/rpaul/taqodr8o/

【参考方案3】：

如果您使用的是 Bootstrap 4，请使用 .w-auto。

见https://getbootstrap.com/docs/4.1/utilities/sizing/

【参考方案4】：

引导程序 3：

为什么要打呢？为什么不简单地使用引导网格来控制表格宽度？

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

这将创建一个包含元素宽度的一半（12 个中的 6 个）的表格。

我有时会根据其他答案使用内联样式，但不鼓励这样做。

引导程序 4：

Bootstrap 4 有一些很好的宽度帮助类，例如 w-25、w-50、w-75、w-100 和 w-auto。这将使表格宽度为 50%：

<table class="w-50"></table>

这是文档：https://getbootstrap.com/docs/4.0/utilities/sizing/

【讨论】：

这是迄今为止最简单的解决方案，应该是公认的答案

【参考方案5】：

我遇到了同样的问题，我修复了表格，然后指定了我的 td 宽度。如果你有，你也可以这样做。

<style>
table 
table-layout: fixed;
word-wrap: break-word;

</style>

<td  /td>

我对 .table-nonfluid 没有任何运气。

【讨论】：

试试width: auto !important;

你可以避免!important（它是bad practice）。见评论an answer below。

【参考方案6】：

我已尝试添加 style="width: auto !important" 并且非常适合我！

【讨论】：

如果你确保你的自定义 CSS 出现在 Bootstrap CSS 之后（例如你的自定义样式 <link> 标签出现在下面 Bootstrap <link> 标签），那么规则将cascade 按照设计，您根本不需要使用 !important 异常。这是真的，因为width: 100%; 是在Bootstrap CSS 中为table 定义的，因此取代了您的width: auto; 规则。

不是真正的答案，最好编辑大多数人阅读的当前接受的答案（我现在编辑了）。