el-table最全修改滚动条及背景文字颜色，不高亮

Koreyoshi·

已于 2022-08-04 11:18:41 修改

阅读量2.8k

点赞数

文章标签： css vue.js 前端 elementui

于 2022-02-15 15:42:33 首次发布

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/122945995

版权

el-table最全修改滚动条及背景文字颜色，不高亮

<style scoped>
::v-deep .el-table,::v-deep .el-table__expanded-cell {
  background-color: #1A2769 !important;
  color: #c5cef7;
}
::v-deep .el-table thead{
  color: #c5cef7;
}
::v-deep .el-table th,::v-deep .el-table tr {
  background-color: #1A2769 !important;
}
::v-deep .el-table td,::v-deep  .el-table th.is-leaf {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
::v-deep .el-table--border::after,::v-deep  .el-table--group::after,::v-deep  .el-table::before {
  background: rgba(255, 255, 255, 0);
}
::v-deep .el-table tbody tr:hover td {
  background-color: #1A2769 !important;
}
/* 单元格单独背景颜色 */
::v-deep .el-table tbody tr td.className {
  background-color: #1A2769 !important;
}
/* 单元格单独背景颜色不高亮 */
::v-deep .el-table tbody tr:hover td.className {
  background-color: #1A2769 !important;
}
/*滚动条凹槽的颜色，还可以设置边框属性 */
::-webkit-scrollbar-track-piece {
	background-color:#04192b;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条的宽度*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/*滚动条的设置*/
::-webkit-scrollbar-thumb {
	background-color:#174d79;
	background-clip:padding-box;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条鼠标移上去*/
::-webkit-scrollbar-thumb:hover {
	background-color:#174d79;
}
/*横竖滚动条都有的时候，右下角有一块白色的*/
*::-webkit-scrollbar-corner{background: #04192b;}

/* 横向滚动条不显示 */
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
</style>