为什么 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% 宽度。为什么？

【问题讨论】：

【解决方案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 中测试。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

引导程序 3：

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

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

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

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

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

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

【讨论】：

【解决方案5】：

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

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

<td width="10%" /td>

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

【讨论】：

【解决方案6】：

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

【讨论】：

如果你确保你的自定义 CSS 出现在 Bootstrap CSS 之后（例如你的自定义样式 <link> 标签出现在下面 Bootstrap <link> 标签），那么规则将cascade 按照设计，您根本不需要使用 !important 异常。这是真的，因为width: 100%; 是在Bootstrap CSS 中为table 定义的，因此取代了您的width: auto; 规则。
不是真正的答案，最好编辑大多数人阅读的当前接受的答案（我现在编辑了）。