如何在 TBody 中将 TH 标头与 TD 对齐

我在尝试使用一些 CSS 将表格嵌入现有 HTML 页面时遇到问题。

默认情况下，此 CSS 隐藏表格的标题，其样式定义如下：

.tablestuff thead {
     display: none;
}

但我希望显示表格，所以我尝试使用“display:block”（使用javascript）在thead元素上设置样式。这使得标题显示，但标题的列与 td 列不对齐。

我已将 HTML 缩减为以下内容（希望拼写错误最少），并在 thead 元素上显示由 javascript 设置的样式。

<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>

如何使标题显示并与 td 列正确对齐？

CSS 包含比常用的更多的显示模式none, inline, inline-block, and block。有很少几个 http://www.w3schools.com/cssref/pr_class_display.asp， 实际上。

在这种情况下，它会出现您想要使用的内容而不是display:block; is display:table-header-group;.

以下是应用于您的表格的不同样式的一些示例：

http://jsfiddle.net/CrYdz/1 http://jsfiddle.net/CrYdz/1