具有display: block的表行无法获得父表的100％宽度，当它们具有display: table-row时，它们自然会获得100％的宽度，但CSS值有一些其他副作用我尝试目前要避免。
Plunker that demonstrate the problem.
是什么原因导致表行像这样起作用而不像普通的块级元素？
答案 0 :(得分：10)
此行为与在浏览器上处理表的方式有关。
table元素设置为display:table。 tr为display:table-row，td为display:table-cell。如果您要创建基于div的css表，它的工作原理相同。
在这个小提琴上：http://jsfiddle.net/rv4v2964/1/，我创建了相同的基本示例，但是使用了div，并添加了一个嵌套到表中的block元素，但关闭了任何行或单元格。
您可以注意到它仅限于第一个单元格的宽度。一个原因在this article中说明：
...表和列的宽度由table和col元素的宽度或第一行单元格的宽度设置...
这意味着当一个元素对表结构是奇数时，第一个单元格的宽度设置整个列的值。这实际上是在W3上指定的table-layout行为：
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
...'width'属性中第一行的单元格值不是'auto'，确定该列的宽度...
另一篇文章提到了每个浏览器上关于如何威胁表格结构的威胁元素的不同行为。 http://snook.ca/archives/html_and_css/getting_your_di
<强>结论
浏览器在创建表时不喜欢，并且在其中放置不应该存在的元素。这可能是我错误地渲染的。它会将第一个单元格的宽度计为参数。
在这种特定情况下，解决方法可能是将显示设置为占用表格整个宽度的display: table-caption;。然后，将属性caption-side设置为bottom，它将保留在表格的底部。
答案 1 :(得分：1)
像这样简单地将表格放在带有“table-responsive”类的 div 中
<div class="table-responsive">
<table class="table"></table>
</div>