Element设置表格对角线
设置对角线
效果图如下
html代码
<el-table-column label="指标" width="150" align="center" fixed>
<el-table-column
prop="deptName"
label="填报部门"
align="center"
width="150"
fixed
></el-table-column>
</el-table-column>
style样式
.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none; /*中间的横线去掉*/
}
.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right; /*上边文字靠右*/
}
.el-table /deep/ thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left; /*下边文字靠左*/
}
/*核心代码*/
.el-table /deep/ thead.is-group tr:first-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 150px; /*斜线的长度*/
top: 0;
left: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-52.5deg); /*调整斜线的角度*/
transform-origin: top;
}
.el-table /deep/ thead.is-group tr:last-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 150px; /*斜线的长度*/
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-53.5deg); /*调整斜线的角度*/
transform-origin: bottom;
}
本文来自博客园,作者:爱吃糖的橘猫,转载请注明原文链接:https://www.cnblogs.com/sglblog/p/17150709.html