table 中的粘性 headers 未完全隐藏下方的 table 数据（滚动）

Question

我用 react-table 创建了一个 table 并用 CSS 制作了粘性 headers:

th {
  position: sticky;
  top: 0; /* required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

然而，它并不完美，当我滚动时，我可以看到 table header.

上方的一些滚动文本

有人遇到过这个问题吗？

Answer 1

解决方法是将顶部移远一点： th { position: sticky; top: -5px; }

我创建了一个更大的标题单元格，因此使用 padding-top:5px

时不会被注意到

Sticky headers in table not completely hiding table data below (on scroll)