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. ```

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

Accepted Answer

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

How to align TH Header with TD in TBody

Solution

Problem