javascript - 如何在谷歌浏览器中创建可滚动表格

Question

好的，这基本上是关于可滚动表格的。

如果我有一个表格元素，我可以通过使 thead 固定高度和 tbody 固定高度，然后将滚动设置为自动打开，使内容可滚动(使用一些 javascript 乐趣，包括使用宽度计算滚动条) body 。

这在 Firefox 中有效，但在 google chrome 中，thead/tbody 的高度会被忽略，整个表格会按预期增长而不是滚动。

是否有可以应用于表格的 css 解决方案以使其在 google chrome 中也能正常工作？或者我是否需要将标题制作成一个表格，将主体制作成一个不同的表格，使用 js 或 css 确保列宽并让主体表格的父级与其内容一起滚动？

Answer 1

这是一个应该有效的完整解决方案(使用 jQuery)您将需要有两个表，每个表都在一个单独的 div 元素中。每个表都有相同的 thead 部分。只有 contentTable 会有 tbody 部分

<div class="scrollableTable"
    <div>
        <table class="headerTable">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
        </table>
    </div>
     <div style="height:240px; overflow:auto;">
        <table class="contentTable" style="width:100%; margin-top:-20px;">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value 1</td>
                    <td>value 2</td>
                    <td>value 3</td>
                </tr>
                <tr>
                    <td>value 4</td>
                    <td>value 5</td>
                    <td>value 6</td>
                </tr>
                ....
            </tbody>
        </table>
    </div>
</div>

然后，每次数据更改时都必须调用此函数:

ResizeWidths($('.scrollableTable'));


function ResizeWidths(div)
{
    var headerCells =  $(div).find('.headerTable thead').find('th');
    var contentCells = $(div).find('.contentTable thead').find('th');
    for(var i =0, ii = headerCells.length;i<ii;i++)
    {
        if($(headerCells[i]).width()!=$(contentCells[i]).width())
            $(headerCells[i]).width($(contentCells[i]).width());
    }
}