ElementUI----table 修改指定列颜色

### 自定义 ElementUI `el-table` 组件的横向滚动条样式 为了修改ElementUI中`el-table`组件的横向滚动条颜色和其他样式属性，可以采用如下CSS代码： ```css .el-table { /* 定义滚动条的整体宽度 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px; /* 对于横向滚动条的高度设置 */ } /* 设置滚动条轨道的颜色和形状 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar-track { background-color: transparent; } /* 调整滚动条滑块的颜色、透明度以及圆角 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ff7e36; /* 改变此值来调整滚动条颜色 */ opacity: 0.8; border-radius: 5px; } } ``` 上述代码通过使用 `/deep/` 关键字穿透作用域链，从而能够覆盖默认样式并应用新的样式到`.el-table__body-wrapper`下的滚动条上[^1]。 对于希望仅针对特定实例而非全局生效的情况，在创建表格时给定唯一的引用名称（如`ref="detailTable"`），可以在对应的JavaScript逻辑或者更具体的CSS选择器里利用这个引用名进一步限定样式的适用范围[^2]。 另外值得注意的是，当涉及到跨浏览器兼容性问题时，除了WebKit内核支持的伪元素外，还需考虑其他类型的浏览器可能使用的不同前缀或标准语法。不过就目前而言，大多数现代浏览器都已较好地支持了这些特性[^3]。 最后提醒一点，如果想要改变表头之后的小空白区域背景色，则可以通过单独指定其父级容器或其他关联的选择器来进行相应调整[^4]。