html - 粘性 HTML 表格标题几乎可以工作，但标题上方的行稍微可见

Question

我正在使用一个名为 react-bootstrap-table2 的 React 表库。它没有办法让第一行变得粘滞，所以我添加了以下 CSS：

.table-container {
  overflow-y: auto;
  max-height: 500px;
}
.react-bootstrap-table th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

生成的表格标题现在是粘性的，但是当我滚动浏览行时，我可以在标题顶部看到该行的几个像素。如果您查看下面“示例表”下的图像，您会看到看起来像点的东西。但是如果我添加padding: 10px;到 CSS 中，很明显它是出现在标题上方的行内容。有什么办法可以防止这种行为？

代码沙盒

标签： htmlcssreactjs

Answer 1

你看到的那些“小像素”基本上就是桌子上的数据。我会稍微往上移动。利用

.react-bootstrap-table th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}

沙盒：https ://codesandbox.io/s/react-bootstrap-table-2-wppbz?file=/src/styles.css