表格样式覆盖,块状表格行

2021-06-28  本文已影响0人  coderfl
.el-table__header th{
  background: #FFEFEA;
  border-top: 1px solid #FFD7CB;
  color: #2D373E;
  font-weight: 500;
  line-height: 30px;
}
.el-table__header th.is-leaf{
  border-bottom: 1px solid #FFD7CB;
}
.el-table__header tr th:first-of-type{
  border-left: 1px solid #FFD7CB;
}
.el-table__header tr th:last-of-type{
  border-right: 1px solid #FFD7CB;
}
.el-table__body td{
  padding-top: 20px;
  color: #2D373E;
  height: 80px;
}
.el-table__body td::before{
  display: block;
  content: "";
  border-bottom: 1px solid #EBEEF5;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100%;
  height: 10px;
}
.el-table__body tr:first-of-type td::before{
  border-top: none;
}
.el-table__body tr td:first-of-type{
  border-left: 1px solid #EBEEF5;
}
.el-table__body tr td:first-of-type::before{
  left: -1px;
}
.el-table__body tr td:last-of-type{
  border-right: 1px solid #EBEEF5;
}
.el-table__body tr td:last-of-type::before{
  right: -1px;
}
.el-table--enable-row-hover .el-table__body tr:hover>td::before{
  background-color: white;
}
image.png
上一篇 下一篇

猜你喜欢

热点阅读