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>

Roman · Accepted Answer · 2012-11-07 08:31:48Z

3

You got to set width to your cells strictly:

th, td { width:30px }

answered Nov 7, 2012 at 8:31

Roman

5044 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ayyash Over a year ago

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

Smiter · Accepted Answer · 2012-11-07 08:44:26Z

Set your thead row width as table width:

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

Community · Accepted Answer · 2017-05-23 11:45:20Z

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)

joko13 · Accepted Answer · 2012-11-07 08:32:59Z

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

Nivin Rai · Accepted Answer · 2012-11-08 04:56:22Z

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

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Related