css实现table表头和列固定功能

最新推荐文章于 2024-07-05 10:49:33 发布

春风姐姐

最新推荐文章于 2024-07-05 10:49:33 发布

阅读量847

点赞数

文章标签： css 前端

原文链接：https://segmentfault.com/a/1190000043148299

版权

背景

项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。

功能

表头固定
左边两类固定
高度要自适应（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>

在这里插入图片描述

春风姐姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现table表头和列固定功能

项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
复制链接

扫一扫