如何使用 CSS 和 JavaScript 冻结 HTML 表格标题？

用于固定 HTML 表格标题的 CSS 和 JavaScript 技术>

能够冻结 HTML 表格中的列标题，如 Microsoft 中所示Excel 的“冻结窗格”功能非常适合扩展表。有几种跨浏览器技术可以使用 CSS 或 JavaScript 来实现此效果。

CSS 转换技术

对于现代浏览器，CSS 转换提供了一个简单的方法有效的解决方案：

 var translate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translate;<br>});<br>

此代码侦听滚动事件表格容器并根据滚动位置翻译表格标题 (thead)。

CSS 的优点转换技术：

• 最少代码（四行）
• 无外部依赖
• 适用于各种表格配置（表格布局）
• 支持除 Internet Explorer 之外的所有主流浏览器8-

示例实现：

 var translate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translate;<br>});

 您现有的容器 /<h1>包裹{</h1><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ CSS 演示 /
td {

background-color: green;
width: 200px;
height: 100px;

}

<pre class="brush:php;toolbar:false"><table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table></p>

”

以上是如何使用 CSS 和 JavaScript 冻结 HTML 表格标题？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html for using class var this position transform column table td microsoft excel Translate

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn