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中的行并一致地进行访问。

Answer 2

所有浏览器都不支持overflow tbody !!

更新：您可能需要创建分钟。标题的两个表和内容的一个表，并将第二个表放在div内并使用overflow，您必须使用javascipt同步列宽。

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

2 个答案: