当tbody css display属性为block时,如何对齐thead和tbody中的列

Question

我和thead,tbody和tfoot有一张桌子.
显示的css值为block - 允许向主体添加滚动条并在thead和tfoot保持原位时滚动行.
由于表格宽度根据TD的宽度而变化,因此TD标签宽度不固定.
我想将thead的TH标签与tbody的TD标签对齐.

如何才能做到这一点？(CSS或JQuery)

编辑:
目标浏览器是谷歌 - Chrome!
并且添加了轻微的扭曲,表格是RTL.

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>

您可以使用此jsFiddle尝试它.

谢谢,快乐.

Answer 1

使用 JS 或 jQuery 访问offsetWidth的第一行中的单元格tbody，然后将它们设置为 的显式width样式th。您可以使用一次迭代中的索引来访问另一次迭代中的元素，从而一致迭代 tbody 和 head 中的行。