当tbody css显示属性为block时，如何对齐thead和tbody中的列 [英] How do I align columns in thead and tbody when tbody css display attribute is block

问题描述

我有一个有thead，tbody和tfoot的表格。

显示的css值是block - 允许在body和滚动条上添加一个滚动条，而thead和tfoot保持不变。

TD标签宽度不固定，因为表格宽度根据TD的宽度而改变。

我想将thead的TH标签与tbody的TD标签对齐。

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.

如何做到这一点？
（CSS或JQuery）

How can this be done? (CSS or JQuery)

编辑：

目标浏览器是Google - Chrome！

添加一点点扭曲，表是RTL。

The target browser is Google - Chrome!
And adding a slight twist, the Table is RTL.

CSS：
$ b

The CSS:

tbody{
    display: block;
    overflow: auto;
}

thead, tfoot{
    display: block;
}

HTML：
$ b

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>

您可以使用此 jsFiddle 。

You can try it using this jsFiddle.

感谢并高兴。

推荐答案

使用JS或jQuery来访问<$ c第一行中的单元格的 offsetWidth $ c> tbody ，然后为 th 设置显式 width 样式。您可以通过使用一次迭代中的索引来访问另一个元素中的元素，来重复tbody和head中的行。

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.

这篇关于当tbody css显示属性为block时，如何对齐thead和tbody中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！