我們可以運用 CSS 中的 position sticky 屬性來製作固定第一列和第一欄的響應式表格。
基礎 HTML 格式
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Column</th>
<th>Heading 1</th>
</tr>
</thead>
<tbody>
<tr>
<th>Column Content</th>
<td>Content</td>
</tr>
</tbody>
</table>
</div>固定第一列的做法
CSS 樣式如下，當中 th 設定為 position sticky 以及需要鎖定外部容器的高度是固定的重點。（可以使用 vh 動態單位避免真的寫死高度）
table thead th {
background-color: #000;
color: #fff;
position: sticky;
top: 0;
}
.table-responsive {
overflow: auto;
height: 80vh;
}固定第一欄的做法
除了設定第一欄為 sticky 以外，設定高度是整個固定欄生效的主要原因。另外設定 thead tr 的 z-index 避免固定欄遮住固定列，如果你希望固定欄遮住固定列的話，可以不需要這個設定。
table {
height: 80vh;
}
table > tbody > tr > td:nth-child(1),
table > tbody > tr > th:nth-child(1) {
position: sticky;
left: 0;
background-color: #fff;
}
table thead tr {
position: relative;
z-index: 1;
}codepen 範例：https://codepen.io/kurorido/pen/eYbKgJw
