【HTML】表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
td {
text-align: center;
height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
position: relative;
width: 30px;
}
td[class=first]{
width: 100px;
}
td[class=first]:before {
content: "";
position: absolute;
width: 1px;
height: 116px;
top: 0;
left: 0;
background-color: #000;
display: block;
transform: rotate(-63deg);
transform-origin: top;
-ms-transform: rotate(-60deg);
-ms-transform-origin: top;
}
td[class=first]:after {
content: "";
position: absolute;
width: 1px;
height: 122px;
top: 0;
left: 0;
background-color: #000;
display: block;
transform: rotate(-30deg);
transform-origin: top;
-ms-transform: rotate(-45deg);
-ms-transform-origin: top;
}
.title1{
position: absolute;
top: 5px;
right:3px;
}
.title2{
position: absolute;
top: 50px;
right:15px;
}
.title3{
position: absolute;
top: 65px;
left:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first" colspan="2" rowspan="2"><span class="title1">时间</span><br><span class="title2">进程</span><br><span class="title3">型号</span></td>
<td colspan="3">一月</td>
<td colspan="3">二月</td>
<td colspan="3">三月</td>
<td colspan="3">四月</td>
<td colspan="3">五月</td>
<td colspan="3">六月</td>
<td colspan="3">七月</td>
<td colspan="3">八月</td>
<td colspan="3">九月</td>
<td colspan="3">十月</td>
<td colspan="3">十一月</td>
<td colspan="3">十二月</td>
<td colspan="3" rowspan="2">数量</td>
</tr>
<tr>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
<td>上旬</td>
<td>中旬</td>
<td>下旬</td>
</tr>
<tr>
<td colspan="2">******2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">******2</td>
<td background="静态.png" style="background-repeat: no-repeat;background-size: 100% 100%;"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td background="动态.png" style="background-repeat: no-repeat;background-size: 100% 100%;"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>23</td>
</tr>
<tr>
<td colspan="2">******2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>23</td>
</tr>
<tr>
<td colspan="2">******2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>23</td>
</tr>
<tr>
<td colspan="2">******2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>23</td>
</tr>
<tr>
<td colspan="2">备注</td>
<td colspan="37">
<div style="display: flex; align-items: center;">
<img src="./静态.png" style="transform: rotate(90deg);width: 30px; height: 60px;float:left;margin-left: 50px;">
<span style="float: left; margin-left: 20px;">静态老炼</span>
<img src="./动态.png" style="transform: rotate(90deg);width: 30px; height: 60px;float:left;margin-left: 50px;">
<span style="float: left; margin-left: 20px;">动态老炼</span>
</div>
</td>
</tr>
</table>
</body>
</html>
效果：
浙公网安备 33010602011771号