CSS改变table内置tbody滚动条

前言

首先让我们一起来看一下Chrome这个浏览器原生的滚动条，如下图所示

看完之后是不是觉得自己活在了十年甚至二十年以前，这个古老的风格真的让人质疑，还好浏览器是支持改变滚动条的样式。在知道可以改变滚动条样式之前，我都选择将其隐藏起来（印象中很多移动端都隐藏了，其实是才疏学浅，没想到可以改变其样式哈哈）

隐藏滚动条代码

/* 隐藏滚动条，前面可选 添加类名，只对存在滚动条的元素生效 */
::-webkit-scrollbar {
  display: none;
}

后来，公司业务需求的竞品中看到了别人的页面中不一样的滚动条，于是萌生了学(chao)习(xi)的想法，竞品中改变了表格内部的滚动条的样式，于是我也照葫芦画瓢，结果写出了个大bug，过程结果如下。

这是竞品，别人家的东西

改变滚动条样式

/* 前面可选 添加类名，只对存在滚动条的元素生效 */
      ::-webkit-scrollbar {
        width: 5px;
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #108cee;
        border: 1px solid #ebebeb;
      }

以上代码运行后如下图，不过这只是改变一般的滚动条样式

基本语法 ::-webkit-scrollbar { styles here }
更多源自MDN的细节：
::-webkit-scrollbar — 整个滚动条.（可以设置width/display等等）
::-webkit-scrollbar-button — 滚动条上的按钮.(上下箭头 / 两端的按钮)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

改变table内置tbody滚动条

对于table标签内置的滚动条会比较特殊，直接改变滚动条会导致标题行和表格行无法对齐
后来我去看了下人家代码中html的结果才发现，别人的操作有点东西！

原来他们将一个表格分成了两个表格，然后使用css属性table-layout: fixed;，一个空表身+一个空表格，实现了自定义表格内部的滚动条，实现了在对齐的情况下改变表格的滚动条，真的有学习到东西！

	table-layout: fixed;
    border-collapse: collapse;

解决过程看起来非常简单，实际确实是非常值得学习的一种编写方法！