javascript - 使用 CSS 和 JavaScript 的 HTML 表格的静态行和列

标签 javascript html css html-table

我希望(至少)将我的 HTML 表格的第一列作为静态列。其余列应水平滚动。如果表格垂直滚动,则静态列和其他列应一起滚动。

在旧版本的 IE 中,您可以使用 CSS 表达式来完成此操作。可以在 http://www.javascripttoolbox.com/lib/scrollingdatagrid/ 找到一个例子。 .

知道如何将其转换为 HTML、CSS 和 JavaScript 解决方案(跨浏览器)吗?

这是我到目前为止想出的:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="position: relative; display: block; width: 200px;">
        <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
            <table>
                <tbody>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                </tbody>
            </table>
        </div></div>
            </div>
    </body>
</html>

最佳答案

你应该尝试为相同的 link to plugin 使用 jquery 插件

关于javascript - 使用 CSS 和 JavaScript 的 HTML 表格的静态行和列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7734927/

相关文章:

javascript - 检查数组中链接的单击是否有子菜单键值。 IF true 运行一些代码 ELSE 运行其他代码

javascript - 用逗号分割字符串,但忽略引号内的逗号

javascript - 在 React 和 Redux 中使用 setTimeout

JavaScript 正则表达式 : how to create a single matching group

JavaScript/HTML -- 变量 SetTimeout 语法

html - 如何使用 CSS 修复球动画

html - 如何删除 Bootstrap 网格中不需要的间隙,使其看起来像一张 table ?

fadeOut 之前的 jQuery HTML 更改

javascript - 禁用除覆盖 div 上的滚动之外的所有指针事件

css - 将 CSS 应用于没有 <img 子节点的 <a