el-table 自定义表格样式

最新推荐文章于 2024-03-27 10:12:55 发布

qq_46100747

最新推荐文章于 2024-03-27 10:12:55 发布

阅读量617

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_46100747/article/details/130341872

版权

.tableClassname {
	background-color: rgba(0, 0, 0, 0);
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(135, 205, 254, 0);
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    /*background-color:rgba(7, 170, 247, 1);*/
    cursor: pointer;
  }
  // 表格行的背景色
  .el-table th, .el-table tr{
	background-color: transparent 
	}
	// 表头的背景色
	.el-table__header .cell{
		background:linear-gradient(to bottom, #0062e8 ,   #00a8ff) !important;
	color:white;
		line-height: 36px;
		height: 36px;
	}
	// 偶数行的背景色
	.el-table--striped .el-table__body tr.el-table__row--striped td{
		background-color: rgba(0, 59, 139, 0.5) 
	  }
	// 鼠标移动时的行背景色
	 .el-table--enable-row-hover .el-table__body tr:hover > td {
		background-color: rgba($color: #1560c9, $alpha: 0.8) !important;
	  }
// 子元素后面插入内容。
	  .el-table--border::after, .el-table--group::after, .el-table::before{
		background-color: transparent 
	  }
}