CSS冻结单元格（新增滚动阴影效果）

最新推荐文章于 2024-07-26 14:07:49 发布
最新推荐文章于 2024-07-26 14:07:49 发布
阅读量969 收藏 2
点赞数 2
分类专栏： 笔记 文章标签： css css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zity_chow/article/details/122470927
版权

滚动带阴影效果

在这里插入图片描述

代码

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table冻结单元格</title>

    <style>
        body {
            background: gray;
        }

        .box {
            width: 800px;
            height: 400px;
            overflow: auto;
        }

        table {
            border-collapse: collapse;
            width: 1000px;
            height: auto;
        }

        td {
            width: 100px;
            height: 50px;
            border: none; /* 在Chrome里，有边框会引起抖动，所以不要边框 */
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            background: #cccccc;
        }

        /* 用伪元素模拟边框 */
        td::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            border-top: 1px solid #505050;
            border-left: 1px solid #505050;
            box-sizing: border-box;
        }

        tr:last-child td::before {
            border-bottom: 1px solid #505050;
        }

        td:last-child::before {
            border-right: 1px solid #505050;
        }

        /* 冻结单元格 */
        tr:nth-child(-n + 2) td, /* 前两行 */
        tr:nth-last-child(1) td, /* 后一行 */
        td:nth-child(-n + 2), /* 前两列 */
        td:nth-last-child(1) /* 后一列 */
        {
            position: sticky;
            background: #00aa00;
            z-index: 2;
        }

        /* 第一行冻结位置 */
        tr:nth-child(1) td {
            top: 0;
        }

        /* 第二行冻结位置 */
        tr:nth-child(2) td {
            top: 50px;
        }

        /* 最后一行冻结位置 */
        tr:nth-last-child(1) td {
            bottom: 0;
        }

        /* 第一列冻结位置 */
        td:nth-child(1) {
            left: 0;
        }

        /* 第二列冻结位置 */
        td:nth-child(2) {
            left: 100px;
        }

        /* 最后一列冻结位置 */
        td:nth-last-child(1) {
            right: 0;
        }

        /* 四个边角的z-index需要比其它单元格的高，不然会被覆盖 */
        tr:nth-child(-n + 2) td:nth-child(-n + 2), /* 左上角 */
        tr:nth-child(-n + 2) td:nth-last-child(1), /* 右上角 */
        tr:nth-last-child(1) td:nth-child(-n + 2), /* 左下角 */
        tr:nth-last-child(1) td:nth-last-child(1) /* 右下角 */
        {
            background: red;
            z-index: 9 !important;
        }

        /* 滚动阴影顶部 */
        .shadow-top tr:nth-child(2) td::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 10px;
            bottom: -10px;
            background: linear-gradient(to bottom, #505050, transparent);
        }

        /* 滚动阴影底部 */
        .shadow-bottom tr:nth-last-child(1) td::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 10px;
            top: -10px;
            background: linear-gradient(to top, #505050, transparent);
        }

        /* 滚动阴影左边 */
        .shadow-left td:nth-child(2)::after {
            content: "";
            position: absolute;
            top: 0;
            width: 10px;
            height: 100%;
            right: -10px;
            background: linear-gradient(to right, #505050, transparent);
        }

        /* 滚动阴影右边 */
        .shadow-right td:nth-last-child(1)::after {
            content: "";
            position: absolute;
            top: 0;
            width: 10px;
            height: 100%;
            left: -10px;
            background: linear-gradient(to left, #505050, transparent);
        }

        /* 滚动阴影垂直修正 */
        .shadow-y td:nth-child(-n + 2), /* 前两列 */
        .shadow-y td:nth-last-child(1) /* 后一列 */
        {
            z-index: 3;
        }

        /* 滚动阴影水平修正 */
        .shadow-x tr:nth-child(-n + 2) td, /* 前两行 */
        .shadow-x tr:nth-last-child(1) td /* 后一行 */
        {
            z-index: 3;
        }
    </style>
</head>
<body>
<div class="box">
    <table>
        <tr>
            <td>标题1</td>
            <td>标题2</td>
            <td>标题3</td>
            <td>标题4</td>
            <td>标题5</td>
            <td>标题6</td>
            <td>标题7</td>
            <td>标题8</td>
            <td>标题9</td>
            <td>标题10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>栏目1</td>
            <td>栏目2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
            <td>数据7</td>
            <td>数据8</td>
            <td>数据9</td>
            <td>数据10</td>
        </tr>
        <tr>
            <td>总计1</td>
            <td>总计2</td>
            <td>总计3</td>
            <td>总计4</td>
            <td>总计5</td>
            <td>总计6</td>
            <td>总计7</td>
            <td>总计8</td>
            <td>总计9</td>
            <td>总计10</td>
        </tr>
    </table>
</div>

<script>
    var box = document.querySelector('.box');

    // 记录最后滚动的距离
    var lastScrollTop = 0, lastScrollLeft = 0;

    // 监听容器滚动
    box.addEventListener('scroll', function (e) {

        // 如果当前垂直滚动距离不等于上次
        if (e.target.scrollTop !== lastScrollTop) {
            // 更新最后距离
            lastScrollTop = e.target.scrollTop;

            // 移除左右阴影样式
            box.classList.remove('shadow-left');
            box.classList.remove('shadow-right');

            // 如果滚动到顶部，移除顶部阴影样式
            if (lastScrollTop === 0) {
                box.classList.remove('shadow-top');
            }
            // 否则添加顶部阴影样式
            else {
                box.classList.add('shadow-top');
            }

            // 如果滚动到底部，移除底部阴影样式
            if (lastScrollTop + box.clientHeight === box.scrollHeight) {
                box.classList.remove('shadow-bottom');
            }
            // 否则添加底部阴影样式
            else {
                box.classList.add('shadow-bottom');
            }

            // 阴影效果修正
            box.classList.remove('shadow-x');
            box.classList.add('shadow-y');
        }

        // 如果当前水平滚动距离不等于上次
        else if (e.target.scrollLeft !== lastScrollLeft) {
            // 更新最后距离
            lastScrollLeft = e.target.scrollLeft;

            // 移除上下阴影样式
            box.classList.remove('shadow-top');
            box.classList.remove('shadow-bottom');

            // 如果滚动到左边，移除左边阴影样式
            if (lastScrollLeft === 0) {
                box.classList.remove('shadow-left');
            }
            // 否则添加左边阴影样式
            else {
                box.classList.add('shadow-left');
            }

            // 如果滚动到右边，移除右边阴影样式
            if (lastScrollLeft + box.clientWidth === box.scrollWidth) {
                box.classList.remove('shadow-right');
            }
            // 否则添加右边阴影样式
            else {
                box.classList.add('shadow-right');
            }

            // 阴影效果修正
            box.classList.remove('shadow-y');
            box.classList.add('shadow-x');
        }
    });
</script>
</body>
</html>
zity_chow
关注
专栏目录
css3实现数字滚动效果,JS+CSS实现滚动数字时钟效果
weixin_39747383的博客
08-03 1584
本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果，这个效果一般都是用在网页开场动画以及区域的时间显示中，非常好看，动画效果也很个性，我们先来看下运行后的效果：下面就是这个滚动时钟动画的全部代码：CSS3+JS滚动数字时钟代码-脚本之家body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235,...
css冻结table
12-27
指定宽度下支持冻结，只需要加对应的样式class接
css冻结表头冻结第一列
12-11
css样式冻结表头，右侧滚动条滑动，表头锁定不动； css样式冻结首列，下侧滚动条滑动，首列锁定不动； 另外，表中首列添加了复选框，css样式，仅供参考学习，可以根据情况改动 适合菜鸟初学，大神高手会觉得简单绕行
table css怎么冻住表头
最新发布
u011511086的专栏
07-26 154
table css怎么冻住表头
用CSS为表格添加阴影效果.rar
07-03
用CSS为表格添加阴影效果
css冻结列的效果
weixin_33889245的博客
06-03 238
&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;css冻结列的效果&lt;/title&gt;&lt;!-- 1.div里面放table或者其它容器，当子容器的宽度大于父容器时，父容器就会出现滚动条。2.头部固定不
CSS层级小技巧：在滚动时自动添加头部阴影
彭世瑜的博客
08-01 1284
固定头部的布局推荐用sticky实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS障眼法和CSS层级，相互遮挡fixed定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在不设置top或者left值时，仍然位于原先位置，也会跟随内容滚动纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和https。...
css表格单元格中的长文本如何实现自动换行
12-13
下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行...
用css实现的带阴影的表格效果的代码
10-30
### 使用CSS实现带阴影的表格效果 在网页设计与开发过程中，使用CSS（层叠样式表）来增强HTML元素的视觉表现力是非常常见的做法。本文将详细介绍如何利用CSS实现一个带有阴影效果的表格，并深入探讨其中涉及的关键...
用CSS为表格添加阴影效果
weixin_30662539的博客
04-23 736
<style>table{filter:progid:DXImageTransform.Microsoft.Shadow(Color=#666666,Direction=120,strength=3)}</style><div align="center"><table width=400 height=200 bgcolor=#FFF0F0 border...
CSS如何添加阴影效果？
weixin_45587319的博客
11-22 3360
在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框（图像）阴影。下面本篇文章就来给大家介绍一下CSS的阴影效果属性，CSS添加阴影效果的方法，希望对大家有所帮助。 1、添加文本阴影 在CSS中可以使用text-shadow属性设置带阴影的文本。此属性可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。 语法： text-shadow: h-shadow v-shad...
css3滚动提示
weixin_30783629的博客
11-11 236
《css揭秘》书中，滚动提示的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">...
CSS之页面布局之二（冻结布局）
JackZhang的专栏
11-13 2436
浮动布局在固定屏幕（如UI面板，）是非常经典常见的页面布局方式。 实现方式很简单，第一步先设置需要浮动起来的元素的宽度width。第二步设置该元素的浮动属性float
css 上下内阴影
qq_36456342的博客
01-07 1485
css上下内阴影
css 左边阴影_css给表格加阴影
weixin_35750747的博客
12-31 661
第1页共9页竭诚为您提供优质文档/双击可除css给表格加阴影篇一：css3—box-shadow(图层阴影)css3——box-shadow(图层阴影)引自airen的博客(作者：大漠)css3的box-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置阴影，而box-shadow是给对象实现图层阴影效果。本文只谈谈box-shadow的具体使用方法...
css拼接表格，达到冻结列的效果
周末未至
09-08 1701
一、背景        项目中有一个表单填报，表单基本可分为左右两边，左边是一些基本评分规则（数量不固定），右边是一些被评分人（数量也不固定）。现在的需求就是，当被评分人数过多时，右边表格需要自动形成滚动条，可滚动评分，而此时左边评分规则不动。        当每一个评分因素评完分之后，需要自动计算该评分项的小计总分以及该被评分人的总计得分，且此处表格存在合并单元格的样式。  二、解决方案 ...
Table冻结行列需要的CSS
weixin_34259559的博客
11-09 208
/*Fix Table Row and Col Style*/.fixLeftTop{     POSITION: relative;      Left: expression(this.offsetParent.scrollLeft-1);    TOP: expression(this.offsetParent.scrollTop-1);    z-index:103 ;}.fixTop{ ...
css 设置冻结表格头,纯CSS冻结表头
weixin_34640051的博客
08-03 594
css/* Colors *//* Bidirectional Table */div.frozen-table {width: 100%;min-height: 150px;overflow: scroll;margin: 0 auto;/* Remove the below 3 properties on your Website (Test-Purpose) */width: 800px;h...
CSS实现表头冻结教程：轻松达成冻结效果
"本文将详细介绍如何利用CSS实现表头冻结效果，这是一种常见的网页布局技巧，特别是在数据密集型表格或滚动区域中，固定表头能够提升用户体验。通过CSS，我们可以轻松地使表头独立于滚动条移动，让用户在查看大量...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值