需垂直滚动的长表格如何将表头固定在页面顶部

可行解决方案 #

核心采用position: sticky实现表头固定，你之前sticky不生效大多是因为应用对象错误、缺少列宽固定配置两个原因，以下是完整修改方案：

核心修改逻辑

1. 不要给thead/tr加固定定位，直接给th加sticky属性，浏览器兼容性最好
2. 给表格新增table-layout: fixed属性，强制列宽按照表头配置固定，保证th和对应td宽度自动对齐
3. sticky定位不会脱离文档流，不会影响外层overflow滚动属性，横向滚动时表头会跟着表格一起移动，列始终对齐

修改后的样式代码

.products-table
  border-collapse: separate
  border-spacing: 0 12px
  min-width: 100%
  font-size: 15px
  border-bottom: 4px solid grey
  table-layout: fixed /* 新增：固定列宽，核心对齐属性 */

  td,th
    padding: 0 10px
    max-width: 300px
    &:first-of-type
      border-radius: 9px 0 0 9px
      padding-left: 14px
    &:last-of-type
      border-radius: 0 9px 9px 0
      padding-right: 14px
  thead
    background-color: grey
    color: white
    font-weight: 700
    th
      height: 26px
      white-space: nowrap
      position: -webkit-sticky /* 新增：兼容webkit内核浏览器 */
      position: sticky /* 新增：粘性定位 */
      top: 100px /* 替换为你需要的距离页面顶部的距离 */
      z-index: 10 /* 新增：避免被页面其他内容覆盖 */
      background-color: grey /* 新增：和表头背景一致，避免滚动时tbody内容透出 */
      a
        color: white
  tbody
    tr
      padding: 0 14px
      td
        word-break: break-word
        background-color: white
        max-width: 300px
      &:nth-of-type(odd) td
        background-color: #f6f6f6

异常排查

如果配置后还是不生效，检查以下两点：

• 表格所有祖先元素不要设置带固定高度的overflow: auto/scroll/hidden属性，否则会改变sticky的定位上下文，导致表头不会粘在页面顶部
• 如果需要实现表格内部纵向滚动而非页面滚动，只需要给外层.table-responsive设置max-height: 自定义高度，同时把th的top改为0即可

内容的提问来源于stack exchange，提问作者hencel