對于一些有大量數據顯示需求的網站而言，表格是必不可少的元素，但是有時候表格數據較多，會導致用戶需要向下翻動頁面才能看到表頭，這顯然不是很用戶友好的。
但是，作為開發者，我們可以使用 CSS 將表格中的第一列固定，這樣用戶在向下滾動頁面時，第一列的內容就會一直展示在用戶視野內，方便用戶查閱表格數據。
實現此功能的方法并不難，只需要給表格中的第一列增加一個常規的 CSS 樣式，如：

html
<style>
td:first-child {
position: sticky;  /* 固定在表格 */
left: 0;           /* 左對齊 */
z-index: 1;        /* 在表格之上 */
}
</style>
<table>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>地址</th>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td>18</td>
<td>日本</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>美國</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
<td>中國</td>
</tr>
<tr>
<td>4</td>
<td>趙六</td>
<td>30</td>
<td>法國</td>
</tr>
</table>

如上代碼所示，我們只需要在 CSS 中設置第一個 td 的 position: sticky; 以及其它一些屬性，即可將第一列在表格中固定。接著，我們可以給表格增加一些樣式美化，使其更加美觀易讀。
這種表格樣式不僅美觀，而且操作起來十分友好，用戶第一眼就能夠看到表頭信息，是開發中不可或缺的一種 CSS 技巧。