纯CSS table表格 thead固定 tbody滚动效果

由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！

实现思路：

将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式，由于 tbody 有了滚动条后，滚动条也要占位，又会导致 tbody 和 thead 不对齐，所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话，可以把滚动条的宽度设置为0px，滚动条就没有了。

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。

鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。

需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。

另外这里，老姚谢谢各位一如既往的支持。

01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似

前言

在数字世界的浩瀚海洋中，CSS如同一位魔法师，用其强大的魔力将网页元素点缀得绚丽多彩。从简单的文字排版到复杂的动画效果，从单调的背景色彩到渐变的光影变幻，CSS都以其独特的方式赋予网页生命力。

网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。

对于滚动条的样式设置，调整以下一个属性的值即可。

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track 外层轨道

问题如下：

自定义封装的组件，在里面修改了全局的滚动条。然而在三方集成的时候，发现滚动条完全被改变了。

请问这个问题怎样解决？

// ============滚动条样式============
// 宽度、高度
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
//背景色
::-webkit-scrollbar-track {
background-color: #191c21;
}
// 滑块颜色
::-webkit-scrollbar-thumb {
background-color: #434b55;
}
// 滚动条右下角交叉部分
::-webkit-scrollbar-corner {
background-color: #434b55;
}

效果

方法一：sticky 方式

核心样式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

使用场景

::-webkit-scrollbar 只支持WebKit的浏览器 (谷歌Chrome, 苹果Safari)可以使用。

全局样式

* {
  scrollbar-width: thin;
  // auto -浏览器默认滚动条宽度
  // thin -设置比默认滚动条更窄的宽度
  // none -隐藏滚动条，但是元素还可以滚动
  // **px -直接设置滚动条的宽度
}

// 垂直滚动条和水平滚动条相交的部分
::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

// 整个滚动条
::-webkit-scrollbar {
  width: 5px; // 宽度
  height: 5px; // 高度
  background-color: #a7b1c2; // 颜色
}

// 滚动条上的滚动滑块。
::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

// 滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

// 滚动条轨道
::-webkit-scrollbar-track {
  display: none;
}

// 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-track-piece {
  display: none;
}

// 右下角拖动块（如：textarea的可拖动按钮）
::-webkit-resizer {
  background: #991d28;
}