为什么Twitter Bootstrap表始终具有100％的宽度？

假设此标记：

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

不知道我有多少个单元格，表格始终是100％宽度。为什么？

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

.table-nonfluid {
   width: auto !important;
}

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

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

这样，您所做的更改将不会影响引导样式表本身（您可能希望在文档中的其他位置使用流畅的表）。

<table style="width: auto;" ...工作良好。在Chrome 38，IE 11和Firefox 34中进行了测试。

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

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

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

答案1：

为什么要打架？为什么不使用引导网格简单地控制表格宽度呢？这是Bootstrap 3标记。

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

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

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

答案2：

如果您使用的是Bootstrap 4，它具有一些不错的宽度帮助类，例如：

w-25, w-50, w-75, and w-100

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

我遇到了同样的问题，我将表格固定了，然后指定了td宽度。如果您有，也可以做。

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

<td width="10%" /td>

我没有.table-nonfluid的运气。

我已经尝试添加style="width: auto !important"并且对我来说效果很好！