Question

I have a table with thead, tbody and tfoot.
The css value for display is block – enables adding a scrollbar to the body and scroll the rows while the thead and tfoot stay in place.
The TD tags widths are not fixed as the tables width changes according to the width of the TD.
I would like to align the thead’s TH tags with the tbody’s TD tags.

How can this be done?
(CSS or JQuery)

Edit:
The target browser is Google – Chrome!

And adding a slight twist, the Table is RTL.

The CSS:

tbody{
    display: block;
    overflow: auto;
}

thead, tfoot{
    display: block;
}

The 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 it using this jsFiddle.

Thanks and be happy.

Answer 1

Use JS or jQuery to access the offsetWidth of the cells in the first row of the tbody and then set those as explicit width styles for the th. You can iterate the row in the tbody and head in unison by using the index from one iteration to access the element in the other.