乐趣区

关于前端:css实现table表头和列固定功能

jiezi

背景

我的项目须要用表格展现数据，要求表头和右边两列可能在滚动的时候固定，思考到目前开源的 table 组件库冗余了太多我的项目不须要的性能，其次也是为了避免数据过多的时候渲染太慢，于是决定用 html 和 css 实现。

性能

  1. 表头固定
  2. 右边两类固定
  3. 高度要自适应（table 默认反对）

思路

应用 table 的 table-layout: fixed 属性设置固定列宽，这样能力在左右滚动时计算出偏移量。联合 css 的 position:sticky 属性，设置第一行和左右两列粘性定位，其中第二列的偏移量依据第一列的宽度决定，以此类推，如果有三列固定，须要晓得前两列的宽度。

table-layout: fixed依据 MDN 的形容，table-layout用于定义了用于布局表格 单元格 ， 行和 列的算法，fixed 属性值用于示意某一列的宽度仅由该列首行的单元格决定。因而，该单元格所在行之后的行并不会影响整个列宽。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .table{
      overflow:auto;
      width:400px;
      height:300px; /* 固定高度 */
      border:1px solid #999;
      border-bottom: 0;
      border-right: 0;
    }


    table {
      border-collapse:separate;
      table-layout: fixed;
      width: 100%; /* 固定寬度 */
    }


    td, th {
      border-right :1px solid #999;
      border-bottom :1px solid #999;
      box-sizing: border-box;
      /* 单元格宽高 */
      width:100px;
      height:30px;
    }
    th {background-color:lightblue;}


    /* 管制右边固定的外围代码 */
    td:nth-child(1),
    th:nth-child(1) {
      position:sticky;
      left:0; /* 首行在左 */
      z-index:1;
      background-color:lightpink;
    }
    td:nth-child(2),
    th:nth-child(2) {
      position:sticky;
      left:100px;
      z-index:1;
      background-color:lightpink;
    }

    /* 管制表头固定的外围代码 */
    thead tr th {
      position:sticky;
      top:0; /* 第一列最上 */
    }

    th:nth-child(1),
    th:nth-child(2){
      z-index:2;
      background-color:lightblue;
    }
  </style>
</head>
<body>


<div class="table">
  <table cellspacing="0" border="0" cellpadding="0">

    <thead>

    <tr>

      <th> 表头 1 </th>

      <th> 表头 2 </th>

      <th> 表头 3 </th>

      <th> 表头 4 </th>

      <th> 表头 5 </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>

效果图

退出移动版