el-table__body-wrapper &::-webkit-scrollbar修改滚动条颜色

可以通过以下方式修改 el-table__body-wrapper 中的滚动条颜色：

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f5f5f5;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
}

其中，`::-webkit-scrollbar` 是用于设置滚动条的整体样式，`::-webkit-scrollbar-thumb` 是用于设置滚动条的滑块样式。你可以根据自己的需要进行修改。

相关问题

修改el-table 滚动条样式

### 修改 Element UI `el-table` 组件的滚动条样式

为了自定义Element UI表格组件 (`el-table`) 的滚动条样式，可以通过CSS来实现。具体来说，可以针对`.el-table__body-wrapper`类应用特定的样式规则。

对于Webkit浏览器（如Chrome和Safari），通过伪元素`::-webkit-scrollbar`及其相关部分来自定义滚动条外观：

.el-table__body-wrapper {
    background-color: #ddd;
}

/* 定义滚动条整体 */
.el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; /* 设置横向或纵向滚动条宽度 */
    height: 8px; /* 设置横向滚动条高度 */
}

进一步细化滚动条的不同组成部分，比如轨道(`track`)、滑块(`thumb`)等:

/* 轨道背景颜色 */
.el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 滑块样式 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .2);
}

/* 鼠标悬停时改变滑块的颜色 */
.el-table__body-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
}

上述代码片段展示了如何调整滚动条的整体尺寸以及各个部件的具体表现形式[^3]。

需要注意的是，在某些情况下可能还需要增加!important声明以确保样式的优先级足够高，从而覆盖默认样式[^1]。

最后，如果是在Vue项目中使用，则可以直接将这些样式写入全局样式文件或是相应页面/组件内的<style scoped>标签内[^2]。

el-table的滚动条样式修改

要修改el-table的滚动条样式，可以使用以下CSS代码：

/* 水平滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #c1c1c1;
}

/* 垂直滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #c1c1c1;
}

将以上代码添加到你的样式文件中即可。你可以根据自己的需要修改颜色和其他样式。