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

Question

我有一个奇怪的问题，我实际上很羞于承认。在这里查看全部内容：http: //jsfiddle.net/Sorcy/ng2by/1/

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

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

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

编辑：

根据要求，它应该看起来如何的图像：表格应该看起来如何

score 3 · Accepted Answer

我认为主要问题是这样的：

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; }

1 回答 1