整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          html表格實(shí)現(xiàn)固定table的表頭和第一列內(nè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è)試


          主站蜘蛛池模板: 大帝AV在线一区二区三区| 国产精品资源一区二区| 人成精品视频三区二区一区| 国模吧一区二区三区精品视频| 国产成人欧美一区二区三区| 国产成人精品一区二三区| 无码人妻视频一区二区三区| 日本人的色道www免费一区| 高清一区二区三区| 亚洲一区二区成人| 亚洲一区二区三区在线播放| 精品欧洲av无码一区二区14| 亚洲国产精品一区| 国产亚洲福利一区二区免费看 | 国产成人亚洲综合一区| 国产亚洲日韩一区二区三区 | 日本免费精品一区二区三区| 中文字幕在线无码一区| 在线观看国产一区二区三区| 搡老熟女老女人一区二区| 香蕉视频一区二区| 在线观看国产一区二三区| 熟女少妇丰满一区二区| 国产成人精品一区在线| 无码精品人妻一区二区三区AV| 无码中文人妻在线一区二区三区| 日本一区二区在线| 任你躁国产自任一区二区三区| 成人毛片一区二区| 国产日产久久高清欧美一区| 无码人妻久久久一区二区三区| 亚洲永久无码3D动漫一区| 国产日韩AV免费无码一区二区三区| 亚洲日韩精品一区二区三区无码| 国产福利一区二区在线视频| 内射女校花一区二区三区| 日本一区精品久久久久影院| 爆乳熟妇一区二区三区| 亚洲av综合av一区二区三区| 波多野结衣一区二区三区高清av| 无码人妻AⅤ一区二区三区水密桃|