使 html 表格使用 100% 的可用宽度

Question

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

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

既然我不想在我的桌子旁边放一个大的蓝色盒子，我该如何让这个东西伸展整个宽度？为 tablerows 设置多少宽度并没有给我带来任何好处，而且由于我事先无法知道我的 table 将有多少列，所以为单元格设置宽度也是不可能的。

到目前为止，我唯一的解决方案是编写一个小的 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; }