css表格表头对⾓线,⽤div+css模拟类excel表格对⾓线（斜
线）
我们先看html代码吧
⽤div+css模拟类excel表格对⾓线(斜线)
科⽬
数学语⽂
姓名
张三9262
李四9167
第⼀种写法
css如下
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border: 1px #525152 solid;
width: 50%;
margin: 0 auto;
margin-top: 100px;
}
table tr:hover>td {
background-color: #ecf3f8;
}
th, td {
border: 1px #525152 solid;
text-align: center;
font-size: 12px;
line-height: 30px;
}
th {
background: #D6D3D6;
}
tr td:first-child {
excel表格斜线
background: #BDBABD;
}
/*模拟对⾓线*/
.out {
border-top: 40px #D6D3D6 solid; /*上边框宽度等于表格第⼀⾏⾏⾼*/
width: 0px; /*让容器宽度为0*/
height: 0px; /*让容器⾼度为0*/
border-left: 80px #BDBABD solid; /*左边框宽度等于表格第⼀⾏第⼀格宽度*/
position: relative; /*让⾥⾯的两个⼦容器绝对定位*/
}
b {
font-style: normal;
display: block;
position: absolute;
top: -40px;
left: -40px;
width: 35px;
}
em {
font-style: normal;
display: block;
position: absolute;
top: -25px;
left: -70px;
width: 55x;
}
注释上已经写明了，提⽰.out的宽⾼都是0，是靠上边框撑起⾼度，左边框撑起宽度的。b和em是绝对定位控制上⾯的字的位置。第⼆种写法
基于上⾯的，只改动.out的和对⾓线span、⽂字的定位
科⽬
姓名
.out{
height: 40px;
position: relative;
}
b {
font-style: normal; display: block;
position: absolute;
top: 0px;
right: -2px;
width: 35px;
}
em {
font-style: normal; display: block;
position: absolute; bottom: 0;
left: -10px;
width: 55px;
}
span {
display: block;
width: 89px;
height: 1px;
background: red; transform: rotate(26deg); position: absolute;
top: 18px;
left: -6px;
}