### table

表格是一個網站很常用的元素，用以展示大量的數據。在處理表格時，通常會加入許多功能，如斑馬線、選中高亮、固定表頭、鎖定列等等，本篇文章主要介紹如何單純的使用css實現固定行或列的功能。

### 一般做法

大部分的網上介紹的實現方式，甚至部分ui框架如iview等都是通過三至四個表格組合，然后js處理同步滾動來實現，這樣的好處是容易實現，pc端也不會出現什么問題。但是在手機端時，會有嚴重的不同步滾動現象，處理的不好時，甚至會出現錯位等，體驗非常不好。

### 本文做法

主要使用了二個css屬性

* table-layout: fixed

* posotion: sticky

### table-layout

為了讓表格呈現滾動效果，必須設定table-layout: fixed，并且給與表格寬度

```css

table {

table-layout: fixed;

width: 100%;

}

```

### position

固定表格的行列需要使用到`posotion: sticky`設定

sticky的表現類似于relative和fixed的合體，在超過目標區域時，他會固定于目標位置

**注意:** `posotion: sticky`應用于table時，只能作用于`

`和``，并且必須定義目標位置left / right / top / bottom來實現固定效果

```

thead tr th {

position:sticky;

top:0;

}

```

簡單說明這兩個屬性后，我們首先建立一個帶表格的html頁面

```html

Title

```

css部分如下

```

div{

overflow:auto;

width:400px;

height:290px; /* 固定高度 */

border:1px solid gray;

border-bottom: 0;

border-right: 0;

}

td, th {

border-right :1px solid gray;

border-bottom :1px solid gray;

width:100px;

height:30px;

box-sizing: border-box;

}

th {

background-color:lightblue;

}

table {

border-collapse:separate;

table-layout: fixed;

width: 100%; /* 固定寬度 */

}

td:first-child, th:first-child {

position:sticky;

left:0; /* 首行在左 */

z-index:1;

background-color:lightpink;

}

thead tr th {

position:sticky;

top:0; /* 第一列最上 */

}

th:first-child{

z-index:2;

background-color:lightblue;

}

```

最后的效果如下：

### 注意

* z-index很重要，需要仔細設置，尤其是對于ios

* 如果是固定多列，每一列需要注意設置好left的值

* 自測時，手機端安卓與ios測試各測試了兩臺，均是可以的，但是測試的機型不全，需要自行多測試

總結

以上是生活随笔為你收集整理的antd 设置表头属性_纯css实现固定表头和锁定列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。