使html表使用100％的可用宽度

Question

我有一个奇怪的问题，我真的很惭愧承认。在这里看到整个事情： http://jsfiddle.net/Sorcy/ng2by/1/

我的问题是：第二个（非常小的）表实际上应该拉伸容器的整个宽度。当我用萤火虫看它时（因此右边的蓝色框，实际上是桌子的背景颜色），但行本身只能伸展到足以容纳内容。

由于我不希望桌子旁边有一个大的蓝色盒子，我如何让这个东西伸展整个宽度？没有任何设置宽度的桌面给我带来任何东西，而且由于我事先无法知道我的桌子会有多少列，所以设置单元格的宽度也是不可能的。

我到目前为止只有解决方案是编写一个小的Javascript来遍历表格，计算列数并设置每个的宽度，但当然我更喜欢纯CSS解决方案。

修改

根据要求，它应该如何看的图像：

Direct link for bigger image

Answer 1

我认为主要问题是：

table {
    display: block;
}

如果更改表的display属性，则基本上要求浏览器忽略它是一个表并将其作为常规元素处理，从而导致不可预测的怪癖。

我不知道你想要完成什么但是可能你真的想要这个：

table {
    border-collapse: collapse;
}

此属性可以更轻松地完成某些视觉设计。

更新＃1：使用这种简单的样式可以在表格的最后一行之后显示一条暗线：

table {
    /*background-color: #001F66;*/
    border-bottom: 1px solid #001F66;
}

更新＃2：要在最后一行的单元格之后得到一条暗线，请将其替换为：

table tr:last-child td { border-bottom: none; }

......用这个：

table tr:last-child td { border-bottom: 1px solid #001F66; }