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

Question

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

这个CSS默认使用样式定义隐藏表的标题,如:

.tablestuff thead {
     display: none;
}

但我希望表格显示,所以我尝试使用"display:block"(使用javascript)在thead元素上设置样式.这使标题显示,但标题的列不与td列对齐.

我已经将我的HTML缩小到以下(希望最小的拼写错误)并在javascript设置的thead元素上显示样式.

<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.事实上,有很多.

在这种情况下,它似乎要使用的,而不是什么display:block;就是display:table-header-group;.

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

http://jsfiddle.net/CrYdz/1

Answer 2

问题是由display:blockthead的style属性引起的.

将其更改为 display:table-header-group

Answer 3

当您想显示 thead 元素时，请使用此值：display: table-header-group;

Answer 4

为表中的表头和表体设置相同的宽度：

<table style="table-layout:fixed">