html - 内部 HTML 表格不是全宽的

Question

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

HTML 由 GWT 应用程序生成，因此请不要评论巨大的开销。

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

我试图width:100% 在 div 和实际表之间放置每个级别，但没有帮助。在运行时外部 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 限制。所有子元素都将符合表格宽度并适当调整。默认情况下，表格宽度将仅与它包含的元素一样宽。