css 檢視更多_CSS粘性定位固定表格thead部分元素小方法

我們都知道CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。任務一種布局都可以通過N多種方式将其設定，今天看看通過屬性值sticky來固定表格頭部内容。

CSS粘性定位固定表格thead部分元素小方法​www.deathghost.cn

表格内容溢出容器的情況下，使用者在閱讀内容時就無法定位内容歸屬列，不得不滾動去檢視表頭辨別，一定程度上影響了使用者體驗；此類需求我們可以通過各種方法去實作，那麼今天看看CSS中position屬性值sticky來實作固定表頭。

我們都知道CSS中position屬性值：

static

|

relative

|

absolute

|

sticky

|

fixed

；也就是相對定位，絕對定位以及粘性定位。

我們就看看其中的sticky屬性值，在其元素被定義為sticky時，不會影響其他元素位置，依然按未定義的情形下定位。

使用場景

粘性定位常用于定位字母清單的頭部元素。标示 B 部分開始的頭部元素在滾動 A 部分時，始終處于 A 的下方。而在開始滾動 B 部分時，B 的頭部會固定在螢幕頂部，直到所有 B 的項均完成滾動後，才被 C 的頭部替代。

須指定 top, right, bottom 或 left 四個門檻值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

例如：

#one { position: sticky; top: 10px; }
           

在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。之後，元素将固定在與頂部距離 10px 的位置，直到 viewport 視口復原到門檻值以下。

下面看看其如何固定表格頭部内容。

1、建立一個内容高度大于容器高度表格

<table>
  <thead>
    <tr class="blue">
      <th>ID</th>
      <th>姓名</th>
      <th>年齡</th>
      <th>位址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>張三</td>
      <td>20</td>
      <td>陝西西安</td>
    </tr>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>20</td>
      <td>陝西延安</td>
    </tr>
    <tr>
      <td>2</td>
      <td>王五</td>
      <td>28</td>
      <td>陝西渭南</td>
    </tr>
    <tr>
      <td>3</td>
      <td>某人</td>
      <td>22</td>
      <td>陝西渭南</td>
    </tr>
    <tr>
      <td>4</td>
      <td>某人</td>
      <td>23</td>
      <td>陝西渭南</td>
    </tr>
    <tr>
      <td>5</td>
      <td>某人</td>
      <td>23</td>
      <td>陝西渭南</td>
    </tr>
    <tr>
      <td>6</td>
      <td>某人</td>
      <td>23</td>
      <td>陝西渭南</td>
    </tr>
    <tr>
      <td>7</td>
      <td>某人</td>
      <td>23</td>
      <td>陝西渭南</td>
    </tr>
  </tbody>
</table>
           

2、設定樣式表

body {
  margin: 0;
  padding: 1em;
}

table {
  width: 100%;
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 15px;
}
tr.blue th{color:white;}
tr.red th {color:yellow;}
tr.blue th,
tr.red th{
  position: sticky;
  top:0;
  background-color:blue;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}
thead tr{
  color:white;
}
           

注意position: sticky定義不是在thead或tr元素上，而是th标簽上。

這樣我們在滾動閱讀時讓其表頭依附在頂端，便于使用者檢視所需内容列。

關于position: sticky的應用大家可以在其他更多場景中使用；而實際項目中複雜表格UI下未必是個好方法，這裡介紹隻是一個小方法。