el-table 得-webkit-scrollbar修改表格样式

### 修改 Element UI `el-table` 组件的滚动条样式 为了自定义 Element UI 中 `el-table` 组件的滚动条样式，可以通过覆盖默认的 CSS 样式来实现。具体方法如下： #### 隐藏并移除滚动条及其占用的空间 通过设置 `.el-table__body-wrapper` 下的 `::-webkit-scrollbar` 及其子元素的相关属性可以达到隐藏滚动条的效果。 ```css .el-table__body-wrapper { &::-webkit-scrollbar { /* 整个滚动条 */ width: 0; /* 纵向滚动条宽度设为0以完全隐藏 */ background: transparent; border: none; } &::-webkit-scrollbar-track {/* 滚动条轨道 */ border: none; } &::-webkit-scrollbar-thumb {/* 滑块部分 */ background-color: transparent; } } ``` 上述代码不仅设置了滚动条不可见，还确保了即使当页面内容超出容器高度时也不会显示任何可见的滚动指示器[^1]。 #### 处理表格间距问题 由于滚动条被移除了，默认情况下可能会留下一些额外空间或布局错位的问题。为此还需要调整表头和列之间的间隙处理方式: ```css /* 移除gutter列 */ .el-table th.gutter, .el-table colgroup col[name='gutter']{ display: none; width: 0; } /* 调整主体宽度使其适应新的布局 */ .el-table__body { width: calc(100% - 0px)!important;/* 动态计算宽度减去原本由滚动条占据的部分 */ } ``` 这些更改能够有效解决因删除滚动条而导致的内容区域不对齐等问题。 #### 完整示例 以下是完整的CSS片段用于修改ElementUI中的`el-table`组件滚动条外观以及修正可能产生的布局异常情况： ```css // ----------修改elementui表格的默认样式----------- .el-table__body-wrapper { &::-webkit-scrollbar { // 整个滚动条 width: 0; // 设置纵向滚动条宽度为零从而隐藏它 background: transparent; border: none; } &::-webkit-scrollbar-track { // 滚动条轨道 border: none; } &::-webkit-scrollbar-thumb { // 滑块部分 background-color: transparent; } } // --------------------隐藏table gutter列和内容区右侧的空白 .el-table th.gutter, .el-table colgroup col[name='gutter']{ display: none; width: 0; } .el-table__body{ width: calc(100%)!important; } ``` 此配置可使 `el-table` 表格内的数据展示更加紧凑美观，在视觉上消除了不必要的滚动条干扰。