固定表头（利用CSS3）

最新推荐文章于 2025-07-01 03:54:03 发布
最新推荐文章于 2025-07-01 03:54:03 发布
阅读量2k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gloria199091/article/details/80454126
<!DOCTYPE html>
<html>


<head>
    <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
        *{ margin: 0; padding: 0; list-style: none;}
        .box {
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            overflow: auto;
        }
        .box table{
            width: 100%;
            border-collapse: collapse;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            text-align: center;
        }
        .box table thead {
            background-color: #ccc;
        }
        .box table th,
        .box table td {
            padding: 8px 10px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            white-space: nowrap;
        }
    </style>
</head>


<body>
<div class="box">
    <table>
        <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
            <th>13</th>
            <th>14</th>
            <th>15</th>
        </tr>
        </thead>
        <tbody>
        <script>
            var tr = '';
            for(var i=0; i<15; i++) {
                tr += '<tr>\
                        <td>'+i+'<span>哈哈哈哈哈哈哈哈</span></td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                    </tr>';
            }
            document.write(tr);
        </script>
        </tbody>
    </table>
</div>
<script>
    window.onload = function() {
        var $ = document.querySelector.bind(document);
        var boxEle = $('.box');
        boxEle.addEventListener('scroll', function(e) {
            this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';
        });
    }
</script>
</body>


</html>
使用纯CSS实现表头固定
WbhsOcaml的博客
09-30 754
在网页开发中，有时候我们需要在表格中固定表头，使其在滚动时保持可见。这在处理大量数据或长表格时非常有用，因为用户可以始终看到表头，而无需滚动到表格底部才能了解列的含义。当表格内容超过容器高度时，表头将保持固定，而表格的主体部分将出现纵向滚动条。这将创建一个具有垂直滚动条的表体区域，并限制其最大高度为250像素，以便在表格内容超过区域高度时出现滚动条。这将创建一个具有垂直滚动条的容器，并限制其最大高度为300像素，以便在表格内容超过容器高度时出现滚动条。接下来，我们将使用CSS来实现表头固定的效果。
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
css3 固定,利用css3 translate完美实现表头固定效果
weixin_39889214的博客
08-03 157
前言前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。效果如下：感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持translate属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。下面来看下代码吧HTML1234...
前端 CSS 表格的表头固定效果
最新发布
小白菜的博客
07-01 1005
本文旨在全面讲解CSS实现表格表头固定的各种方法，特别聚焦于现代CSS的position: sticky方案。我们将覆盖从基础到进阶的实现技巧，并解决实际开发中遇到的常见问题。文章将从表格布局基础开始，逐步深入表头固定技术，分析各种实现方案的优缺点，最后提供完整的代码示例和最佳实践。表格布局(Table Layout)：HTML中用于展示行列数据的结构化方式表头固定(Sticky Header)：当表格内容滚动时，表头保持可见的效果：CSS定位属性，元素在视口中达到特定位置时会"粘住"表格结构。
css3固定表头
gzeehg007的博客
12-13 282
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;script src="Scripts/jquery-1.7.js"&
css 固定表头
u010865136的专栏
04-03 881
表明该元素将固定在距离视口顶部的位置，即保持在屏幕的顶部。这通常用于实现类似固定表头、固定导航栏等效果。类名的元素设置为粘性定位（sticky positioning），并让其距离视口顶部（top）为 0。页面条数太多，下滑动时，表头上去了，想要将表头固定在顶部，锁住表头。粘性定位使得元素在滚动到特定位置时会固定在屏幕上。表格表头那一行tr中添加如下属性。，这段代码的作用是将具有。
css 表头固定
qq_42855675的博客
05-31 508
.layui-table th:first-child { border-left: 0px; } .layui-table tbody tr td:first-child { border-left: 0px; } .layui-table th, .layui-table td { border-wi...
利用css3 translate完美实现表头固定效果
09-27
利用CSS3中的translate属性来实现表头固定效果是一种前端开发技术，它主要通过调整元素的位置来实现滚动时表头保持固定的效果，从而提高数据表格的可读性和用户体验。下面详细说明在实现表头固定效果中涉及的关键...
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
5. 对于固定表头，使用`position: fixed`并根据需要设置`left`和`top`。 这个解决方案能够有效地处理宽表格，提供清晰的视图和良好的用户体验，尤其适用于后台管理系统和其他需要大量数据展示的场景。通过理解和...
CSS 固定表头和列
05-27
总之，实现CSS固定表头和列是提高数据表格可读性和用户交互性的重要手段。通过理解CSS定位原理并结合HTML结构，我们可以创建出符合需求的自定义解决方案。对于更复杂的应用场景，利用现有的JavaScript库可以提供更多...
vue表格实现固定表头首列
11-02
3. **固定表头**：要实现固定表头，我们可以使用CSS样式来实现。通常，我们可以设置`position: fixed`给表头，然后通过调整`top`和`width`属性来确保其位置和宽度。同时，需要确保表体部分的滚动不影响表头，这可能...
css3 translate实现表头固定
qq_34044224的博客
02-27 447
window.onload = function() { var $ = document.querySelector.bind(document); var boxEle = $('.box'); boxEle.addEventListener('scroll', function(e) { this.querySelector('thead').styl
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
div+css 固定表头和列
01-08
div+css 固定表头和列div+css 固定表头和列
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
CSS3 实现表头固定滚动
Rao的博客
08-25 502
核心思想 主要使用CSS 3的新特性 position: sticky; sticky 是 relative 和 fixed 两者的结合体, 通常用在内容滚动的时候，固定滚动的内容 通常搭配的css 样式 top: 0px; z-index: 2; position: sticky !important; top需要指定偏移量，保证固定位置，注意：top, bottom, right, left 至少要一个 z-index ，当内容滚动时，保持固定内容在上一层 !important 表示该样式
js+css3实现固定表格头和列
catastrophe_zy的博客
08-13 4485
受css3实现固定表格头部而无需设置单元格td的宽度这篇文章启发，用css3的transform实现的表格头和列固定， 这种实现方式优势就是简单，高效，原生。不改变table结构 以下只是简单的实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Table...
最简单的纯css固定table的表头
yfx000的专栏
06-01 5159
页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。
简单css实现表格头部固定
山外小楼
09-16 2595
简单css实现表格头部固定
GridView固定表头实现与CSS样式
首先，实现GridView固定表头的关键在于利用CSS和JavaScript技术。在给出的代码片段中，主要通过设置特定的CSS类和JavaScript表达式来完成这一功能。 1. **CSS样式**： - `div#div-gridview`：这是包裹GridView的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值