Geek Answers Handbook

How to align columns in amad and tbody when tss css display attribute is a block

I have a table with thead, tbody and tfoot.
The css value to display - this is a block - allows you to add a scroll bar to the body and scroll through the lines while ted and tfoot remain in place.
The width of the TD labels is not fixed, since the width of the tables changes in accordance with the width of the TD.
I would like to align TH tags with TD tags.

How can I do that? (CSS or jQuery)

Edit:
Target Browser - Google - Chrome!

And adding a little twist, the RTL table.

CSS:

tbody{ display: block; overflow: auto; } thead, tfoot{ display: block; }

HTML:

  <table> <caption>My Table</caption> <thead> <tr><th>Col1</th><th>Col2</th></tr> </thead> <tbody> <tr><td>Cell11</td><td>Cell12</td></tr> <tr><td>Cell21</td><td>Cell22</td></tr> <tr><td>Cell31</td><td>Cell32</td></tr> <tr><td>Cell41</td><td>Cell42</td></tr> <tr><td>Cell51</td><td>Cell52</td></tr> <tr><td>Cell61 Is Wide</td><td>Cell62</td></tr> </tbody> <tfoot> <tr><th>6 Rows</th><th></th></tr> </tfoot> </table>

You can try using this jsFiddle .

Thank you and be happy.

+6
jquery html css
source share
2 answers

Use JS or jQuery to access offsetWidth cells in the first row of tbody , and then set them as explicit width styles for th . You can iterate a string in tbody and head in unison, using an index from one iteration to access an element in another.

+4
source share

overflow for tbody not supported by all browsers!

Update: you may need to create a min. two tables for headings and one for content, and the second inside the div and use overflow , and you need to synchronize the width of the columns with javascipt.

+1
source share

More articles:


All Articles