【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>
效果: