How to align TH Header with TD in TBody

Question

I'm having problems trying to embed a table in an existing HTML page with some CSS.

This CSS is hiding the header of the table by default with a style definition like:

.tablestuff thead {
     display: none;
}

But I want the table to show, so I tried setting the style on the thead element with "display:block" (with javascript). That makes the header display, but the columns of the header don't line up with the td columns.

I have reduced my HTML to the following (hopefully with minimal typos) and showing the style on the thead element as set by 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>

How can I make both the header show and also align correctly with the td columns?

Answer 1

CSS includes more display modes than the commonly used none, inline, inline-block, and block. There are quite a few, in fact.

In this case, it appears what you want to use instead of display:block; is display:table-header-group;.

Here are some examples of the different styles, as applied to your table:

http://jsfiddle.net/CrYdz/1