vue 滚动条表格颜色问题

可恨的资本家

已于 2022-08-17 14:51:52 修改

阅读量383

点赞数 1

文章标签： vue.js elementui 前端

于 2022-06-08 10:19:20 首次发布

本文链接：https://blog.csdn.net/Tttrycatch/article/details/125179356

版权

这篇博客主要介绍了如何使用CSS来修改HTML表格的显示效果，包括去除表格的背景颜色，使表格在鼠标悬停时改变颜色，以及调整网页滚动条的样式。通过设置`.table`类的选择器，可以实现透明背景和自定义的鼠标悬停颜色。同时，对滚动条的宽度、颜色和边框进行了定制，提升了页面的视觉效果。

摘要由CSDN通过智能技术生成

table表格去除背景颜色

在table表格显示的地方需要使用一个div进行包住

.table .el-table th {
  background-color: transparent !important;
}

.table .el-table tr {
  background-color: transparent !important;
}

.table .el-table__body tr:hover > td {
  background-color: #323232 !important;
}

/*// 去除底部白线*/
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.table .el-table, .el-table__expanded-cell {
  background-color: transparent;
}

.table .el-table th.el-table__cell > .cell {
  color: #f0f0f0 !important;
}

table表格鼠标移入后颜色改变

.el-table__body tr:hover > td{
background-color:yellow !important;
}
记得加!important

滚动条样式的调整

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background-color: #8c8c8c;
  /*滚动条滑块颜色*/
  background-color: rgb(0, 93, 253);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}