html - 如何在 TBody 中将 TH Header 与 TD 对齐

Question

我在尝试使用某些 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 列正确对齐？

Answer 1

CSS 包含比常用的none、inline、inline-block 和block 更多的显示模式.有quite a few ， 实际上。

在这种情况下，您想要使用 display:block; 而不是 display:table-header-group;。

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

http://jsfiddle.net/CrYdz/1