html - 粘性 HTML 表格标题有效，但滚动时标题轮廓消失

Question

我正在使用一个名为 react-bootstrap-table2 的 React 表库，并添加了以下 CSS 以使第一行具有粘性：

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

粘性标题正在工作，但是当我开始滚动时，标题轮廓消失了。有什么办法可以防止这种情况？

代码沙箱

滚动前：

滚动后：

标签： htmlcssreactjs

Answer 1

您可以使用伪元素来创建边框，因此它保留在th：

.react-bootstrap-table .table-bordered {
  border-top: none;
}

.react-bootstrap-table th {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-top: none;
}

.react-bootstrap-table th::before {
  position: absolute;
  content: '';
  top: 0;
  left: -2px;
  width: calc( 100% + 2px);
  height: 1px;;
  background-color: #dee2e6;
}

.react-bootstrap-table th::after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: -2px;
  width: calc( 100% + 2px);
  height: 1px;;
  background-color: #dee2e6;
}

我top也将 th 更改为 0 。

编辑以保留底部边框。