一張表實現固定表頭和鎖定列

時間 2020-08-25

標籤一張實現固定表頭鎖定简体版

原文原文鏈接

table

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

通常作法

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

本文作法

主要使用了二個css屬性ios

table-layout: fixed
posotion: sticky

table-layout

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

table {
 table-layout: fixed;
 width: 100%;
}

position

固定表格的行列須要使用到posotion: sticky設定
sticky的表現相似於relative和fixed的合體，在超過目標區域時，他會固定於目標位置iview

注意: posotion: sticky應用於table時，只能做用於<th>和<td>，而且必須定義目標位置left / right / top / bottom來實現固定效果測試

thead tr th {
 position:sticky;
 top:0;
}

簡單說明這兩個屬性後，咱們首先創建一個帶表格的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部分以下ui

<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>

最後的效果以下：
spa

注意

z-index很重要，須要仔細設置，尤爲是對於ios
若是是固定多列，每一列須要注意設置好left的值
自測時，手機端安卓與ios測試各測試了兩臺，均是能夠的，可是測試的機型不全，須要自行多測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。