CSS固定表格***行的方法

在CSS中，我們可以使用position: sticky;屬性來(lái)固定表格的***行，這個(gè)屬性可以將元素固定在距離視口（viewport）特定距離的位置，直到達(dá)到其包含塊的邊緣。

以下是一個(gè)簡(jiǎn)單的示例，展示如何固定表格的***行：

HTML代碼：

<table>
  <tr class="header">
    <th>姓名</th>
    <th>年齡</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
  <tr>
    <td>***五</td>
    <td>35</td>
    <td>男</td>
  </tr>
</table>

CSS代碼：

.header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* 可選，設(shè)置背景色 */
}

在這個(gè)示例中，我們給表格的***行（即header類(lèi)）應(yīng)用了position: sticky;屬性，并將其固定在視口的頂部（top: 0;），這樣，無(wú)論用戶(hù)如何滾動(dòng)頁(yè)面，表格的***行都會(huì)保持在視口的頂部，我們還設(shè)置了一個(gè)背景色來(lái)區(qū)分***行和其他行。

position: sticky;屬性在大多數(shù)現(xiàn)代瀏覽器中都得到了支持，但在一些舊版本的瀏覽器中可能不適用，在使用之前，***好先測(cè)試一下兼容性。