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

我有一个奇怪的问题，我真不好意思承认。看看这里的整个情况：

我的问题是：第二张（非常小的）桌子实际上应该伸展容器的整个宽度。当我用firebug查看它时，它是这样做的（因此右边的蓝色框，实际上是表的背景色），但是行本身只能延伸到容纳内容所需的范围

既然我不想在我的桌子旁边放一个蓝色的大盒子，我怎么才能让它伸展整个宽度呢？tablerows的宽度设置并没有给我带来任何好处，因为我无法事先知道我的表将有多少列，所以设置单元格的宽度也是不可能的

到目前为止，我唯一的解决方案是编写一个小型Javascript，它可以遍历表、计算列并动态设置每个列的宽度，但当然我更喜欢纯CSS解决方案

编辑：

根据要求，提供其外观的图像：

---

我认为主要问题在于：

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用于标识表格样式中奇怪的显示属性。我使用display:block表示表格最后一行后的暗线。如果我不使用display:block，则填充的bottom:1px永远不起作用，因此在表格下方永远看不到背景色，因此我没有最后一行（不间断）。是的，我知道，但这是为你设计的。是的，这增加了一条线，但不是我的设计师想要的一条完整的线…：）@抱歉，还是一条虚线。我想我只需要告诉我的设计师，他们应该忘记那些断线，而使用所有未断线，这样会更容易。我建议你编辑这个问题，并添加一个你没有完成的设计部分的屏幕截图。@Sourcy-这是一个相当简单的设计。这些都是我在更新2中提出的。