html - tbody 和 thead 的宽度不同

Question

我有一个来自遗留应用程序的 HTML 结构，我必须像我们的新应用程序一样设置样式。为此，我只需要为 tbody 添加边距。所以在表格中设置填充将不起作用，因为标题应该与表格一样宽。

这是它应该是什么样子的一个小草图:

为什么我需要它？我必须并排放置两个表格，看起来应该只有一个标题但有两个内容表格。

我试过 thead 元素的填充和边框，但问题是 thead 的底部边框未应用于右边框。

编辑:/ 图片是关于我想要的。提到这两个表是因为这就是我希望一个表看起来像那样的原因。

如果解决方案像我在图片中显示的那样设置表格的样式，或者设置具有两个不同的 tbody 和 thead 的两个表格的样式，就像他们有一个 thead 一样。

我需要的仍然是 tbody 中各列的正确标签，但左右两列应该更宽一些，以便将其拉伸(stretch)到整个表格。

编辑:/ 因为有些困惑，我在这里的意思是我想在不使用 JS 更改 DOM 结构的情况下完成的样式的屏幕截图:

Answer 1

将 display:table 设置为 tbody 并轻松使用自定义宽度。

Complete Demo

HTML:

<table>
    <thead>
        <tr><td>Head1</td></tr>
        <tr><td>Head2</td></tr>
    </thead>
    <tbody>
        <tr><td>Body1</td></tr>
        <tr><td>Body2</td></tr>
        <tr><td>Body3</td></tr>
        <tr><td>Body4</td></tr>
    </tbody>
</table>

CSS:

table{
    width: 500px;
background: #808080;
}
thead{
    width: 100%;
text-align: center;
background: #FF6347;
}
tbody{
    display: table;
width: 400px;
margin: 0 auto;
text-align: center;
background: #FFF;
}