<!DOCTYPE html>
<html>
<head>
<title>帶有額外列的表格示例</title>
<style>
/* 可選的CSS，用於美化表格 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
/* 為了在“資訊”列中分隔“身份”和“性別”，這裡使用了一個簡單的破折號 */
.info-subhead {
font-weight: normal; /* 如果需要，可以將這部分文字的字型加粗取消 */
}
</style>
</head>
<body>
<div
style="
border: 1px solid #aaaaaa;
height: 270px;
width: 100%;
overflow: auto;
"
>
<table>
<span>
<tr style="top: 100px;
font-weight: bold;
background-color: #98afc7;
position: sticky;
top: 0px;
overflow: auto;
">
<th rowspan="2">姓名</th>
<th rowspan="2">年齡</th>
<th colspan="2">資訊<span class="info-subhead">（身份 - 性別）</span></th> <!-- 使用colspan來合併兩列的空間 -->
</tr>
<tr style="top: 100px;
font-weight: bold;
background-color: #98afc7;
position: sticky;
top:40px;
overflow: auto;
">
<th>身份</th>
<th>性別</th>
</tr>
</span>
<tr>
<td>張三</td>
<td>30</td>
<td>軟體工程師</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI設計師</td>
<td>女</td>
</tr>
</table>
</div>
</body>
</html>
