html的table多級表頭表格的代碼

時間 2019-11-18

標籤 html table 多級表頭表格代碼欄目 HTML 简体版

原文原文鏈接

1，兩級表頭的代碼

<html>

<head>

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>

<body>

<thead>

<th colspan="6">本週採集房屋總量（戶）</th>

<th colspan="3">累計採集房屋總量（人）</th>

<th colspan="4">本週隱患處理狀況（處）</th>

</tr>

<th>對比上週變化</th>

<th>出租房屋數量</th>

<th>對比上週變化</th>

<th>自住房屋數量</th>

<th>對比上週變化</th>

<th>出租房屋累計</th>

<th>自主房屋累計</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html

效果圖片爲：

2，兩個以上級表頭的代碼css

<html>

<head>

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>

<thead>

<th colspan="1" rowspan="5" width="6.4%">終端使用人</th>

<th colspan="14">工做開展狀況</th>

</tr>

<th colspan="1" rowspan="4">工做量總計</th>

</tr>

</tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html

圖片顯示效果：html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。