Table header and body are not getting aligned prop

Question

I have a table of the following format when i m trying to fix its head using the following css, I m losing the alignment , the table header and body are not getting aligned properly..What can I do to overcome this..

#ex_table
{

table-layout: fixed !important;
}

#ex_table thead tr
{
position: fixed !important;

}

Here is the HTML part

<div class="table_div" style="height:400px;width:98%;overflow:scroll">
<table  id="ex_table">
/*thead and tbody populated dynamically via jquery datatables*/
<tfoot id="ex_footer">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot> 
</table>
</div>

Answer 1

The answer is not that simple, it needs a lot of work. position: fixed does not work as expected when working with table so you will need another approach

Here is a JSFiddle I put together from a bit of searching the web, http://jsfiddle.net/UWS6N/1/

Also found this on Stackoverflow, it's a question already answered and it involves some jQuery, personally i'm a fan of doing things like this with CSS as it's faster.

Table header to stay fixed at the top when user scrolls it out of view with jQuery

Also, please reserve <th> tags only for the header row, using <thead> as a container for that specific row will help with code readability, placing them in the <tfoot> is a standards violation (a bit harsh this expression I know, but I'm a standards advocate and tend to get a bit edgy when I see bad code, that's probably just me)

Answer 2

You got to set width to your cells strictly:

th, td { width:30px }

Answer 3

I combined the solution proved by @RomanTheGreat and @Smiter ,and wrote a CSS as given below...Eventhough the alignment isnt pitch prefect.This almost got me there

#ex_table
    {
    table-layout: fixed !important;
    }
    #ex_table thead tr
    {
     width:500px !important;
     position: fixed !important;
    }
    #ex_table tbody tr
    {
     width:500px!important;
    } 
    #ex_table th, td { width:100px; }

Answer 4

Fixed-positioning keeps an element in the same spot in the viewport no matter where on the page the user is. So if you use this property on the TRs, they all get stacked up in the top left corner of the viewport (browser window).

Answer 5

Set your thead row width as table width:

#ex_table thead tr
{
  width:98%;
  position: fixed !important;
}