假设这个标记：
<table class="table table-bordered" align="center">
不管我有多少单元格，表格总是 100% 宽度。为什么？
问问题
151718 次
6 回答
239
引导程序中的所有表格都根据它们的容器进行拉伸，您可以通过将表格放置在.span*您选择的网格元素中轻松地做到这一点。如果您希望删除此属性，您可以创建自己的表类，然后将其添加到要扩展的表中，其中包含以下内容：
.table-nonfluid {
width: auto !important;
}
您可以在自己的样式表中添加此类，然后将其添加到表的容器中，如下所示：
<table class="table table-nonfluid"> ... </table>
这样您的更改不会影响引导样式表本身（您可能希望在文档的其他地方有一个流动表）。
于 2012-05-21T15:52:55.810 回答
33
<table style="width: auto;" ...工作正常。在 Chrome 38、IE 11 和 Firefox 34 中测试。
jsfiddle：http: //jsfiddle.net/rpaul/taqodr8o/
于 2015-01-12T23:30:19.590 回答
32
如果您使用的是 Bootstrap 4，请使用.w-auto.
于 2018-08-14T14:08:44.753 回答
16
引导程序 3：
为什么要打呢？为什么不简单地使用引导网格来控制表格宽度？
<div class="row">
<div class="col-sm-6">
<table></table>
</div>
</div>
这将创建一个包含元素宽度的一半（12 个中的 6 个）的表格。
我有时会根据其他答案使用内联样式，但不鼓励这样做。
引导程序 4 和 5：
Bootstrap 4 有一些很好的宽度帮助类，如w-25, w-50, w-75,w-100和w-auto. 这将使表格宽度为 50%：
<table class="w-50"></table>
于 2018-03-13T13:15:10.800 回答
12
我遇到了同样的问题，我修复了表格，然后指定了我的 td 宽度。如果你有，你也可以这样做。
<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>
<td width="10%" /td>
我对 .table-nonfluid 没有任何运气。
于 2013-09-30T20:59:40.143 回答
3
我已经尝试添加style="width: auto !important"并且对我很有用！
于 2014-06-16T14:15:15.853 回答