为什么Twitter Bootstrap表总是有100％的宽度？

Question

假设这个标记：

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

没有我有多少单元格，表格总是100％宽度。为什么？

Answer 1

引导程序中的所有表根据其容器进行拉伸，您可以通过将表放在所选的.span*网格元素中轻松完成。如果您希望删除此属性，可以创建自己的表类，只需将其添加到要扩展的表中，其中包含以下内容：

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

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

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

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

Answer 2

<table style="width: auto;" ...运行正常。在Chrome 38，IE 11和Firefox 34中测试过。

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

Answer 3

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

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

<td width="10%" /td>

我没有运气.table-nonfluid。

Answer 4

答案＃1：

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

Content-Length

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

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

答案＃2：

如果你使用bootstrap 4，它有一些很好的帮助类，宽度如下：

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

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

Answer 5

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

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

Answer 6

我尝试添加style="width: auto !important"并且对我有用！