純CSS控制凍結(jié)首列是一種非常實(shí)用的技術(shù)，它可以讓表格在滾動時保持表格中的第一列固定。這對于大型數(shù)據(jù)表格而言非常有用，因?yàn)樗梢宰層脩粼跐L動表格時快速地查看所有數(shù)據(jù)。

這里我們就來看一看如何使用純CSS實(shí)現(xiàn)凍結(jié)首列。首先，我們需要分離表頭和表體，并將它們分別放在兩個div中，分別為頭部容器和表體容器，如下所示：

<div class="header-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>城市</th>        
</tr>
</thead>
</table>
</div>
<div class="body-container">
<table>
<tbody>
<tr>
<td>小紅</td>
<td>18</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
<td>上海</td>
</tr>
<tr>
<td>小強(qiáng)</td>
<td>22</td>
<td>男</td>
<td>廣州</td>
</tr>
</tbody>
</table>
</div>

接著，我們需要使用CSS來實(shí)現(xiàn)將表格中的第一列固定。我們可以使用如下的CSS代碼：

.header-container {
position: sticky;
left: 0;
}
.header-container th:first-child {
position: sticky;
left: 0;
z-index: 1;
}
.body-container td:first-child {
position: sticky;
left: 0;
background-color: #f5f5f5;
z-index: 2;
}

其中，我們使用了position: sticky屬性來將頭部容器固定在最上方，然后使用left: 0來將它的位置設(shè)置為最左側(cè)。接著，我們再使用:first-child偽類來將表格中的第一列單元格也固定在最左側(cè)，同時使用z-index屬性來控制它們覆蓋關(guān)系，確保表頭在表格中的第一列單元格之上。最后，我們還使用了background-color屬性來給鎖定的單元格應(yīng)用不同的背景顏色，以便于用戶區(qū)分。

通過這些CSS規(guī)則，我們就可以實(shí)現(xiàn)一個表格中的第一列固定的效果了。隨著用戶滾動表格，頭部容器和表格中的第一列單元格會保持一定的位置，確保用戶一直可以看到這些關(guān)鍵數(shù)據(jù)。