整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁中實(shí)現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實(shí)現(xiàn)方法
效果如下：
在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動(dòng)查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強(qiáng)用戶體驗(yàn)！
實(shí)現(xiàn)代碼
html結(jié)構(gòu)：
css代碼：
javascript代碼：
定定位：(1)給自身設(shè)置寬高。(2)再設(shè)置position:fixed
## table
表格是一個(gè)網(wǎng)站很常用的元素，用以展示大量的數(shù)據(jù)。在處理表格時(shí)，通常會(huì)加入許多功能，如斑馬線、選中高亮、固定表頭、鎖定列等等，本篇文章主要介紹如何單純的使用css實(shí)現(xiàn)固定行或列的功能。
### 一般做法
大部分的網(wǎng)上介紹的實(shí)現(xiàn)方式，甚至部分ui框架如iview等都是通過三至四個(gè)表格組合，然后js處理同步滾動(dòng)來實(shí)現(xiàn)，這樣的好處是容易實(shí)現(xiàn)，pc端也不會(huì)出現(xiàn)什么問題。但是在手機(jī)端時(shí)，會(huì)有嚴(yán)重的不同步滾動(dòng)現(xiàn)象，處理的不好時(shí)，甚至?xí)霈F(xiàn)錯(cuò)位等，體驗(yàn)非常不好。
### 本文做法
主要使用了二個(gè)css屬性
* table-layout: fixed
* posotion: sticky
### table-layout
為了讓表格呈現(xiàn)滾動(dòng)效果，必須設(shè)定table-layout: fixed，并且給與表格寬度
```css
table {
table-layout: fixed;
width: 100%;
}
```
### position
固定表格的行列需要使用到`posotion: sticky`設(shè)定
sticky的表現(xiàn)類似于relative和fixed的合體，在超過目標(biāo)區(qū)域時(shí)，他會(huì)固定于目標(biāo)位置
**注意:** `posotion: sticky`應(yīng)用于table時(shí)，只能作用于`<th>`和`<td>`，并且必須定義目標(biāo)位置left / right / top / bottom來實(shí)現(xiàn)固定效果
```
thead tr th {
position:sticky;
top:0;
}
```
簡(jiǎn)單說明這兩個(gè)屬性后，我們首先建立一個(gè)帶表格的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很重要，需要仔細(xì)設(shè)置，尤其是對(duì)于ios
* 如果是固定多列，每一列需要注意設(shè)置好left的值
* 自測(cè)時(shí)，手機(jī)端安卓與ios測(cè)試各測(cè)試了兩臺(tái)，均是可以的，但是測(cè)試的機(jī)型不全，需要自行多測(cè)試
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
