用div+css模拟类excel表格对角线(斜线)
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
用div+css模拟类excel表格对角线(斜线)
我们先看html代码吧
<table>
<caption>用div+css模拟类excel表格对角线(斜线)</caption>
<tr>
<th style="width:80px;">
<div class="out">
<b>科目</b>
<em>姓名</em>
</div>
</th>
<th>数学</th>
<th>语文</th>
</tr>
<tr>
<td>张三</td>
<td>92</td>
<td>62</td>
</tr>
<tr>
<td>李四</td>
<td>91</td>
<td>67</td>
</tr>
</table>
第一种写法 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 {
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
、文字的定位
<div class="out">
<b>科目</b>
<em>姓名</em>
<span></span>
</div>
.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;
}
- 分类:
- Web前端
更新时间:
上一篇:下一篇: