html的table多級表頭表格的代碼
阿新 • • 發佈:2018-09-26
分享 lpad 新增 100萬 dff first eight 使用 mage 1,兩級表頭的代碼
<html>
<body>
<div></div>
<div class="table">
<table border="1" cellspacing="0" cellpadding="10" width="100%">
<thead>
<tr class="firstHead">
<th colspan="1" rowspan="2">序號</th>
<th colspan="1" rowspan="2">村莊名稱</th>
<th colspan="6">本周采集房屋總量(戶)</th>
<th colspan="3">累計采集房屋總量(人)</th>
<th colspan="4">本周隱患處理情況(處)</th>
</tr>
<tr class="twoHead">
<th>合計</th>
<th>對比上周變化</th>
<th>出租房屋數量</th>
<th>對比上周變化</th>
<th>自住房屋數量</th>
<th>對比上周變化</th>
<th>總計</th>
<th>出租房屋累計</th>
<th>自主房屋累計</th>
<th>新增隱患</th>
<th>消除隱患</th>
<th>現存隱患</th>
<th>對比上周</th>
</tr>
</thead>
<tbody>
<tr>
<td>∞</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>
</tr>
</tbody>
</table>
</div>
</body>
</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多級表頭表格的代碼