html的table多級表頭表格的代碼
阿新 • • 發佈：2018-09-26
分享 lpad 新增 100萬 dff first eight 使用 mage 1，兩級表頭的代碼
<html>
<head> <title>多層表頭22</title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> td, th { font-style: normal; font-weight: normal; text-align: center; } tr { height: 48px; } .firstHead, .twoHead, .threeHead { height: 32px; } .fourHead { height: 64px; } .firstHead th { font-size: 14px; font-weight: bold; } table { border: none; border-collapse: collapse; border-color: #D8DFE6; } table thead { background: #F3FDFF; } table tbody td { width: 6.3%; } table tbody tr { height: 50px; } </style> </head>
<body> <div></div> <div class="table"> <table border="1" cellspacing="0" cellpadding="10" width="100%"> <thead> <tr class="firstHead"> <th colspan="1" rowspan="5" width="4%">序號</th> <th colspan="1" rowspan="5" width="6.4%">終端使用人</th> <th colspan="14">工作開展情況</th> </tr> <tr class="twoHead"> <th colspan="1" rowspan="4">工作量總計</th> <th colspan="9">采集情況</th> <th colspan="4">檢查情況</th>
</tr> <tr class="threeHead"> <th colspan="3" rowspan="1">人口</th> <th colspan="3" rowspan="1">房屋</th> <th colspan="3" rowspan="1">車輛</th> <th colspan="4" rowspan="1">房屋隱患</th>
</tr> <tr class="fourHead"> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">戶籍</th> <th colspan="1" rowspan="2">流動</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">自住</th> <th colspan="1" rowspan="2">出租</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">機動車</th> <th colspan="1" rowspan="2">非機動車</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">生活安全</th> <th colspan="1" rowspan="2">出租管理</th> <th colspan="1" rowspan="2">房屋功能</th> </tr> </thead> <tbody> <tr> <td width="4%">∞</td> <td>30萬</td> <td>20萬</td> <td>60萬</td> <td>100萬</td> <td>看著辦</td> <td>∞∞</td> <td>20萬</td> <td>100萬</td> <td>看著辦</td> <td>∞∞</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> </tr> </tbody> </table> </div> </body>
</html
<head> <title>多層表頭</title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> td, th { font-style: normal; font-weight: normal; text-align: center; } tr { height: 48px; } .twoHead th { width: 6.25%; height: 48px; padding: 0 10px; font-size: 14px; font-weight: normal; } .firstHead th { font-size: 14px; font-weight: bold; } table { border: none; border-collapse: collapse; border-color: #D8DFE6; } table thead { background: #F3FDFF; } </style> </head>
2，兩個以上級表頭的代碼
<html><head> <title>多層表頭22</title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> td, th { font-style: normal; font-weight: normal; text-align: center; } tr { height: 48px; } .firstHead, .twoHead, .threeHead { height: 32px; } .fourHead { height: 64px; } .firstHead th { font-size: 14px; font-weight: bold; } table { border: none; border-collapse: collapse; border-color: #D8DFE6; } table thead { background: #F3FDFF; } table tbody td { width: 6.3%; } table tbody tr { height: 50px; } </style> </head>
<body> <div></div> <div class="table"> <table border="1" cellspacing="0" cellpadding="10" width="100%"> <thead> <tr class="firstHead"> <th colspan="1" rowspan="5" width="4%">序號</th> <th colspan="1" rowspan="5" width="6.4%">終端使用人</th> <th colspan="14">工作開展情況</th> </tr> <tr class="twoHead"> <th colspan="1" rowspan="4">工作量總計</th> <th colspan="9">采集情況</th> <th colspan="4">檢查情況</th>
</tr> <tr class="threeHead"> <th colspan="3" rowspan="1">人口</th> <th colspan="3" rowspan="1">房屋</th> <th colspan="3" rowspan="1">車輛</th> <th colspan="4" rowspan="1">房屋隱患</th>
</tr> <tr class="fourHead"> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">戶籍</th> <th colspan="1" rowspan="2">流動</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">自住</th> <th colspan="1" rowspan="2">出租</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">機動車</th> <th colspan="1" rowspan="2">非機動車</th> <th colspan="1" rowspan="2">總數</th> <th colspan="1" rowspan="2">生活安全</th> <th colspan="1" rowspan="2">出租管理</th> <th colspan="1" rowspan="2">房屋功能</th> </tr> </thead> <tbody> <tr> <td width="4%">∞</td> <td>30萬</td> <td>20萬</td> <td>60萬</td> <td>100萬</td> <td>看著辦</td> <td>∞∞</td> <td>20萬</td> <td>100萬</td> <td>看著辦</td> <td>∞∞</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> <td>20萬</td> </tr> </tbody> </table> </div> </body>
</html
圖片顯示效果：
html的table多級表頭表格的代碼