整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁中實現像表格文檔那樣固定table的表頭和第一列內容，類似于excel表格那樣！下面說說實現方法
效果如下：
在數據眾多的列表下，規定的區域內上下左右都可以滾動查看，然而表頭和側邊表頭都還在，方便用戶查看數據，增強用戶體驗！
實現代碼
html結構：
css代碼：
javascript代碼：
定定位：(1)給自身設置寬高。(2)再設置position:fixed
## 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時，只能作用于`<th>`和`<td>`，并且必須定義目標位置left / right / top / bottom來實現固定效果
```
thead tr th {
position:sticky;
top:0;
}
```
簡單說明這兩個屬性后，我們首先建立一個帶表格的html頁面
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table cellspacing="0" border="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
```
css部分如下
```
<style>
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;
}
</style>
```
最后的效果如下：
### 注意
* z-index很重要，需要仔細設置，尤其是對于ios
* 如果是固定多列，每一列需要注意設置好left的值
* 自測時，手機端安卓與ios測試各測試了兩臺，均是可以的，但是測試的機型不全，需要自行多測試
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
