阅读 265

固定表头、固定列的高性能表格

粘性定位

  • 滚动容器

    具有 sticky 属性的元素,会固定在离它最近的一个拥有 滚动机制 的祖先元素上(overflow: auto)

  • 效果呈现

    [前提] 在一个滚动容器内

    当元素跨越特定阈值前,显示的效果与 relative 一致

    当元素跨越特定阈值后,显示效果与 fixed 一致

  • 注意事项

    父元素不能设置 overflow: hidden 或者 overflow: auto 属性

    必须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同

  • 场景1 - 吸顶固定

    .sticky {
      position: sticky;
      top: 0;
    }  
    复制代码
  • 场景2 - 固定表头

    .sticky th {
      position: sticky;
      top: 0; z-index: 20;
      background-color: #E6EDFF;
      border: 1px solid #ebeef5;
    }
    复制代码
  • 场景3 - 固定第一列

    .sticky th:first-child,
    .sticky td:first-child {
      position: sticky;
      left: 0; z-index: 20;
    }
    复制代码

固定表头、固定列的表格

  • 设置滚动容器

    <div class="container"></div>
    复制代码
    .container {
      overflow: auto;
    }
    复制代码

    注意:需要指定滚动容器的高度或最大高度来达到预期效果

  • 表格初始化

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
    }
    复制代码

    采用 固定布局 方式,各列宽度由第一行决定,后面指定的宽度会被忽略

    减少表格渲染过程中的重绘,提升性能

  • 滚动时固定行和列的左右边框会消失

    th, td {
      &::before, &::after {
        content: '';
        position: absolute
      }
      &::before {
        left: 0; bottom: 0;
        width: 100%; height: 1px;
        background-color: #ebeef5;
      }
      &::after {
        left: 0; top: 0;
        height: 100%; width: 1px;
        background-color: #ebeef5;
      }
    }
    td {
      position: relative;
    }
    .container {
      border-top: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
    }
    复制代码

    使用伪元素模拟左边框和下边框,并且给最外层容器添加右边框和上边框

  • 滚动时左上角的交叉单元格会被右边和下边的滚动元素覆盖

    层级 z-index 大于固定元素的层级即可

  • 文本溢出显示省略号

    .ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    复制代码

    为了让 text-overflow: ellipsis 起作用,需要为目标列的表头指定宽度

文章分类
前端