Table header and body are not getting aligned properly when table header freezed using CSS

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>

score 3 · Accepted Answer · answered Nov 07 '12 at 08:31

3

You got to set width to your cells strictly:

th, td { width:30px }

answered Nov 07 '12 at 08:31

Roman

504
4
10

this is probably the closest to the problem, i think your problem lies in the table-layout: fixed, this means the table will NOT adjust according to content, this means the td widths must be explicitly set – Ayyash Nov 07 '12 at 09:01

score 1 · Answer 2 · answered Nov 07 '12 at 08:44

1

Set your thead row width as table width:

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

answered Nov 07 '12 at 08:44

Smiter

1,391
10
11

score 1 · Answer 3 · edited May 23 '17 at 11:45

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)

score 0 · Answer 4 · answered Nov 07 '12 at 08:32

0

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

answered Nov 07 '12 at 08:32

joko13

638
5
16

score 0 · Answer 5 · answered Nov 08 '12 at 04:56

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; }

Table header and body are not getting aligned properly when table header freezed using CSS

5 Answers5

Linked