如何在 Google Chrome 中创建可滚动表 [英] How to create a Scrollable Table in Google Chrome

问题描述

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

Ok so this is basically about scrollable tables.

如果我有一个表格元素，我可以通过使 thead 固定高度和 tbody 固定高度，然后将滚动设置为自动开启来使内容可滚动(使用一些 javascript 乐趣，包括使用宽度来调整滚动条)身体.

If I have a table element I can make the content scrollable (with some javascript fun, including accouting for the scroll bar using the width) by making the thead fixed height, and the tbody fixed height, then setting scrolling to auto on the tbody.

这在 Firefox 中有效，但在 google chrome 中，thead/tbody 上的高度被忽略，并且整个表格按预期增长与滚动.

This works in Firefox, but in google chrome the heights on the thead/tbody are ignored and the whole table grows vs scrolling as intended.

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

Is there a css solution that can be applied to the table to make this work in google chrome as well? Or do I need to make the header one table, the body a different table, ensure the column widths using js or css and have the parent of the body table scroll with it's content?

推荐答案

我猜你在使用下面的脚本 页面

I guess you were using the script from the following page

为了修复 Chrome 中发生的错误，请更改以下几行:

In order to fix the bug occuring in the Chrome change the following lines:

 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 中创建可滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！