Position Sticky 与表格头

原文章https://css-tricks.com/position-sticky-and-table-headers/ (opens new window). 本身产品有个需求需要表格自动吸顶，本身用了 antd design 的 scroll 实现的，现在使用 css 实现，效果更好

thead和tr上无法设置 styleposition: sticky;, 到那时在th上却可以，这也意味着，其实你可以在一个传统的table上实现吸顶 header 效果，如果你不清楚吸顶实现的原理，大概实现起来会很棘手吧，使用 css 总比原先用 js 去监听事件然后改变position好得多

兼容性

查看兼容性 (opens new window) 只要不是 ie 这种活化石，基本都已经支持了

使用

1. 保证 table 的 position 为 relative
2. 给每个 th 加上 sticky
3. 保证其父容器没有overflow: hidden

例子

.sticky-head
  >>>.el-table
    overflow visible
    .el-table__header-wrapper
      overflow visible
      position sticky
      top 0
      z-index 10
      table
        position sticky
        top 0
        thead
          position relative
          th
            position sticky
            top 0
            z-index 10