通过样式表实现固定表头和列

最新推荐文章于 2025-07-30 17:44:28 发布
原创 最新推荐文章于 2025-07-30 17:44:28 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#class #html #table #div

本文提供了一个使用HTML和CSS实现表格固定表头及首列的示例代码。该方法通过设置相对定位和表达式来确保滚动时表头和第一列保持可见。示例中包括了带有固定头部和列的表格结构及其样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下是通过样式表实现的固定表头和列的HTML代码 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>固定表头和列</title>
    <style>
        .FixedTitleRow
        {
            position: relative; 
            top: expression(this.offsetParent.scrollTop); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {
            position: relative; 
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }
        
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color: #E6ECF0;
        }
    </style>
</head>
<body>
   <div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
        position: absolute; height: 200px;">
        <table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
            style='table-layout: auto' bordercolor='lightgrey'>
            <tbody>
                <tr class="FixedTitleRow">
                    <td class="FixedTitleColumn">
                        ID0</td>
                    <td class="FixedTitleColumn">
                        CK0</td>
                    <td class="FixedTitleColumn">
                        Code0</td>
                    <td class="FixedTitleColumn">
                        Descirption0</td>
                    <td class="FixedTitleColumn">
                        TOL0</td>
                    <td>
                        XS0</td>
                    <td >
                        SS0</td>
                    <td>
                        MS0</td>
                    <td>
                        DS0</td>
                    <td>
                        BS0</td>
                    <td>
                        XL0</td>
                    <td>
                        ML0</td>
                    <td>
                        DL0</td>
                    <td>
                        EM0</td>
                    <td>
                        BM0</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                        010</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                        010</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                        010</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>
html表头和左侧固定js,JS固定表头及固定左边列
weixin_29735819的博客
06-03 1402
花了两个晚上的时间，终于搞定了固定表头功能。先上效果图(注：有背景图和灰色的行、列为固定的表头行和左边列，背景图是表格原有的样式，不是固定表头后添加的)指定要固定的行数和列数，兼容各浏览器，固定后的表头和左边列的样式外观完全复制原来的表格样式。可以设置固定整个表头，即Table中有设置了 ，可以固定整个thead；也可以按指定的行数固定。有一种情况不可以启用左边列固定，即当表头行中的相应的列的单元...
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
html表头固定原理,表头固定(利用jquery实现原理介绍)
weixin_39692271的博客
05-31 445
表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况，如果限定宽度，出现横向滚动条就无能为力了。我的目的就是要像jquery-ui那样，找到页面上存在的表格，调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件...
el-table多级表头 固定多列
YU_1123_ting的博客
07-05 3825
el-table多级表头 固定多列
实现固定表头表格的总结
fanjun的专栏
01-27 372
这阵正好比较空闲，将以前收集的实现固定表头表格的方法在这里整理了一下。 原来想将代码直接贴在文章里，不过试了下载入很慢，所以就放在附件了。   方法1：使用CSS实现在table外面套个div限制显示大小，同时设置表头单元格的样式为position: relative;top: expression(document.getElementById("div").scrollTop);其中ex...
深究“通过样式表实现固定表头和列”
weixin_33766168的博客
07-02 320
看此帖：http://blog.youkuaiyun.com/chinmo/archive/2008/04/24/2322158.aspx通过样式表来实现固定表头和列。效果确实不错。但是对于其中的疑问和问题这里需要补充一下。原文中设了三个样式，FixedTitleRow标题行(TR)的样式，FixedTitleColumn标题列(TD)的样式及FixedDataColumn数据列(TD)的样式；在这三种样式...
CSS实现固定首列和表头
__猫玖__的博客
02-16 2732
首行首列固定
H5实现固定表头首列表格
weixin_45371730的博客
09-06 940
解决方案：禁用ios的自身滚动，利用代码实现滚动效果（但是滚动会没有浏览器滚动那么流畅丝滑，如果小伙伴们有更好的解决方案~可以一起讨论呐）bug2:ios中纵向滚动、横向滚动不独立（横向滑动的同时，纵向会轻微滚动，纵向滑动的同时，横向会轻微滚动）三、js实现表头、首列滚动。bug1:ios橡皮筋效果。四、遇到的bug调整。
vue表格实现固定表头首列
11-02
在实现固定表头和首列的表格时，我们将利用Vue的这两个特性来构建可复用的组件。 1. **数据绑定**：Vue中的数据绑定允许我们创建动态视图。在表格中，我们可以将数据存储在一个数组中，然后通过`v-for`指令遍历这个...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...
JS固定表头和左边列V2.0（源码）
07-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
复杂表头固定表头和列.html
04-29
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
JasperReport、ireport固定表头隐藏列
01-11
在这个特定的案例中，我们关注的是如何在JasperReport和iReport中实现固定表头以及隐藏和显示列的功能。 首先，让我们了解一下JasperReport。JasperReport是一个开源的报表库，它允许开发者在各种应用程序中生成...
vue实现变态表格表头和列固定
sinat_41694829的博客
11-27 3400
复杂表格表头和列固定 对于这个问题，相信网上也会有很多答案，很多插件或者是类似的案例，一下是我参考别人所写的案例自己改造的一个变态表格 1.实现的效果是，左右滚动，左边列固定，上下滚动，上边头部固定 2.要实现这个效果，具体方法是分为四个表格，用到了同步滚动的方法 3.反正很复杂，直接上代码吧 template: <template> <div class="table-scr...
【HTML】＜script＞元素中的 defer 和 async 属性详解
qq_27579471的博客
07-26 442
HTML5中<script>元素的defer和async属性用于优化脚本加载。defer异步下载脚本并在DOM解析完成后顺序执行，适合依赖DOM的脚本；async异步下载后立即执行但不保证顺序，适合独立模块。两个属性都只对外部脚本有效，不能同时使用。合理选择可提升页面性能：defer用于需要DOM的脚本，async用于独立脚本，无属性用于关键脚本。注意避免在延迟脚本中使用document.write。
HTML 音频/视频
lsx202406的博客
07-26 797
HTML 音频和视频标签为网页开发者提供了丰富的多媒体嵌入功能。通过本文的介绍，开发者可以更好地掌握 HTML 音频和视频标签的用法，为网页增添生动的多媒体元素。
day25——HTML & CSS 前端开发
最新发布
白元霞的博客
07-30 694
HTML与CSS是Web开发的基石，掌握它们不仅是前端开发的基础，也是理解现代Web应用架构的关键。通过语义化的HTML结构、精心设计的CSS样式和响应式布局技术，开发者可以创建出既美观又功能强大的Web体验。本文全面梳理HTML与CSS核心知识点，涵盖语法规则、常用元素、布局技术及最佳实践，帮助开发者构建语义化、响应式的现代网页。Padding 内边距。Content 内容。Margin 外边距。
实现HTML表格固定表头和列的完美展示
现在我们来看如何实现固定表头和列的效果： **使用HTML实现表格基础结构：** ```html 列1 列2 列3 <!-- 其他列 --> 数据1 数据2 数据3 <!-- 其他数据 --> <!-- 其他行 --> ``` **使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值