element table表格表头显示斜杠/斜线


   
      
         
            
         
      
   
   
      
         
      


      //多个


   

样式部分:

/deep/ .el-table th{
	overflow: initial;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type,
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type{
	border-bottom: none;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type .cell{
	text-align: right;
}
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type .cell{
	padding-left: 0;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type .cell{
	text-align: left;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before,
/deep/ .el-table thead tr:last-of-type th:first-of-type:before{
	content: '';
	position: absolute;
	width: 1px;
	background-color: #666;
	display: block;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before {
	height: 198px; //根据情况调整
	top: 0; 
	left: 39px;  //根据情况调整
	transform: rotate(-34deg);  //根据情况调整
	transform-origin: top;
	z-index: 2;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
	height: 183px;  //根据情况调整
	bottom: 0;
	right: 0;  //根据情况调整
	transform: rotate(-54deg);  //根据情况调整
	transform-origin: bottom;
}

完成效果:

element table表格表头显示斜杠/斜线_第1张图片

你可能感兴趣的:(前端)