# 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 这种活化石,基本都已经支持了
# 使用
- 保证 table 的 position 为 relative
- 给每个 th 加上 sticky
# 例子
.stickyTable {
:global(table) {
position: relative;
:global(th) {
position: sticky;
top: 0;
z-index: 9999;
}
}
}