<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格对角线</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
caption {
font-size: 14px;
font-weight: bold;
}
table {
border-collapse: collapse;
border: 1px #525152 solid;
width: 600px;
margin: 0 auto;
margin-top: 100px;
}
th,
td {
border: 1px #525152 solid;
text-align: center;
font-size: 12px;
line-height: 30px;
background: #C6C7C6;
}
th {
background: #D6D3D6;
}
/*模拟对角线*/
/* 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{
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: 0px;
left: -10px;
width: 55px;
}
span{
display: block;
width: 89px;
height: 1px;
background: red;
transform: rotate(26deg);
position: absolute;
top: 18px;
left: -6px;
}
.t1 {
background: #BDBABD;
}
</style>
</head>
<body>
<table>
<caption>
用div+css模拟表格对角线
</caption>
<tr>
<th style="width:80px;">
<div class="out"> <b>类别</b><span></span> <em>姓名</em> </div>
</th>
<th>年级</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td class="t1">张三</td>
<td>三</td>
<td>2</td>
<td>99</td>
</tr>
<tr>
<td class="t1">李四</td>
<td>三</td>
<td>1</td>
<td>95</td>
</tr>
</table>
</body>
</html>
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
