How to align TH Header with TD in TBody

When you want to show the thead element use this value: display: table-header-group;

The problem is caused by the display:block in the style attribute for the thead.

Change it to display:table-header-group

To set same width for table header and table body in table:

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

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