【語法】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格第一列及第一行固定不動</title>
</head>
<style>
div{
width:70%;
height:286px;
overflow:auto;/* div高度有效。無此值則表格無捲軸 */
}
table {
border:0px solid red; /* 測試用 */
table-layout: fixed;
width: 200px; /* 固定寬度 */
border-collapse: collapse;
}
td, th {
border:1px solid gray;
border-left:0px;
border-top:0px;
width:100px;
}
td{
left:0; /* 須為0，行首全部固定，左右捲軸不能動。此屬性放在 td:first-child 也可以 */
height:30px;
}
th {
position:sticky;
top:0; /* 須為0，列首全部固定，上下捲軸不能動（包括灰色的那一格） */
height:36px;
background-color:lightblue;
}
th:first-child{
position:sticky;
left:0; /* 須為0，列首第一格固定，左右捲軸不能動（灰色的那一格） */
z-index:1; /* 值須大於等於 1，代表固定不動。若等於0，則直橫向捲動都會變動 */
background-color:lightgrey;
}
td:first-child{
position:sticky; /* 「必須」放在此處*/
background-color:lightpink;
}
</style>
<body>
<div>
<table>
<thead>
<tr>
<th>交叉</th>
<th>行一</th>
<th>行二</th>
<th>行三</th>
<th>行四</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>列一</td>
<td>行01列01</td>
<td>行02列01</td>
<td></td>
<td></td>
</tr>
<tr>
<td>列二</td>
<td>行01列02</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>列三</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>列四</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【截圖】
