内部HTML表格不是全宽度

Question

我有一些复杂的HTML + CSS情况，我想以某种方式理解和修复。

HTML是由GWT应用程序生成的，所以请不要评论巨额的开销。

我的问题是带有蓝色边框的内部表格没有占据红色边框div中的完整水平空间。

我试图在div和实际表之间的每个级别放置width:100%但没有帮助。在运行时，外部div的宽度是未知的，所以我不想在嵌套表中重复确切的宽度。

以下是显示情况的jsFiddle：http://jsfiddle.net/jantekb/NBCcZ/

在你的回答中，请尝试解释实际结果的原因，不仅告诉我正确的答案，而且仅后者也受到高度赞赏..： - ）

Answer 1

其中一个表的宽度没有100％，添加此行，您将看到差异：

td > table { width:100%; }

http://jsfiddle.net/NBCcZ/2/

但你应该找到一种更好的方法来在那个混乱中添加CSS：D

干杯。

Answer 2

您必须为每个table元素指定100％宽度。

添加以下css为我修复了它：

table{
    width: 100%;
}

http://jsfiddle.net/NBCcZ/3/

Answer 3

在你的css中试试这个：

table {
    width: 100%;       
}

这会将所有表格元素设置为其父元素的100％宽度。由固定宽度为550px的div限制。所有子元素将符合表格宽度并正确调整。默认情况下，表格宽度仅与其包含的元素一样宽。