纯css3实现表格固定列效果

柔光的暖阳◎ 2022-12-03 02:20 219阅读 0赞

## 使用css3的sticky属性 ##

*  父元素不能overflow:hidden或者overflow:auto属性。
 *  必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .table_container { width: 100%; overflow: scroll; } table { width: 100%; width: 1800px; } table tr { background: lemonchiffon; } table th, td { text-align: center; background: lemonchiffon; } .fixed_column { position: sticky; left: 0; z-index: 9999; } </style>
    </head>
    <body>
        <div class="table_container">
            <table border="1">
                <thead>
                    <tr>
                        <th class="fixed_column">标题1</th>
                        <th>标题2</th>
                        <th>标题3</th>
                        <th>标题4</th>
                        <th>标题5</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fixed_column">1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

## 效果 ##

![在这里插入图片描述][20200901145442765.png_pic_center]

[20200901145442765.png_pic_center]: /images/20221123/5e6d424dd9ba4dca9186af72cb509f8b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css3实现表格固定列效果

使用css3的sticky属性父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、righ

柔光的暖阳◎/ 2022年12月03日 02:20/ 0 赞/ 220 阅读

相关纯css实现粒子效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）

小灰灰/ 2022年08月27日 10:49/ 0 赞/ 589 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 440 阅读

相关纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的[3D折纸效果][3D]，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎[移步][Link 1]。本效

野性酷女/ 2022年08月25日 05:17/ 0 赞/ 345 阅读

相关纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，请大家先到我的codepen里看看[效果][Link 1]，效果如下图所示。 ![SouthEast][] 左边为起始状态，右

男娘i/ 2022年08月25日 02:17/ 0 赞/ 290 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 363 阅读

相关 HTML Table 固定列宽，实现excel表格效果

(1)获取行号 <table> <tr onmouseover ="showIndex(this)"><td>1</td></tr> <tr onmo

Bertha 。/ 2022年04月10日 08:12/ 0 赞/ 541 阅读

相关纯CSS3实现的标签效果

1.效果分析纯CSS3实现的标签效果，如图1所示，看看[demo][]。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面

浅浅的花香味﹌/ 2022年02月27日 01:17/ 0 赞/ 372 阅读

相关纯css实现上左固定，中间切换效果

接触过vue的童鞋都知道路由跳转，配置子路由实现tab选项卡效果。而常见的头部固定，左侧边栏固定，只是右侧内容变化的这种布局方式又是我们所必须的。那么脱离框架，怎么基于

秒速五厘米/ 2021年09月19日 01:42/ 0 赞/ 362 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1212 阅读