Question

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

如果我有一个表元素，我可以使内容可滚动（有一些javascript乐趣，包括使用宽度计算滚动条），使thead固定高度，tbody固定高度，然后设置滚动到自动tbody。

这适用于Firefox，但在谷歌浏览器中，thead / tbody的高度会被忽略，整个表格会增加而不是按预期滚动。

是否有可以应用于表格的css解决方案，以便在谷歌浏览器中使用？或者我是否需要将标题设置为一个表，正文是一个不同的表，使用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());
    }
}

Answer 2

我猜您使用的是以下page

中的脚本

为了解决Chrome中出现的错误，请更改以下行：

 if (document.all && document.getElementById && !window.opera) this.initIEengine();
    if (!document.all && document.getElementById && !window.opera) this.initFFengine();

到此：

 var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    if (is_chrome = true) {
        this.initIEengine()
    }
    else {
        if (document.all && document.getElementById && !window.opera) this.initIEengine();
        if (!document.all && document.getElementById && !window.opera) this.initFFengine();
    }

完美地运作

如何在Google Chrome中创建可滚动表格

2 个答案: