用于 Element-UI 组件的带有 CSS 的粘性表头

Question

在我的代码中，我使用了 element-ui 表格 (https://element.eleme.io/#/en-US/component/table) 组件。它很好用，但我想将表头自定义为粘性。

它为其提供最大高度/高度内容，例如：https://element.eleme.io/#/en-US/component/table#table-with-fixed-columns-and-header

但我想像这样使用它：https://codepen.io/chriscoyier/pen/PrJdxb

在 CSS 中，有一些技巧，比如：

th {
  background: white;
  position: sticky;
  top: 0;
  ...
}

我想在这里，我该如何实现它？有什么建议吗？

我的情况是：

<div css="first-section">
  ...
</div>
<div css="second-section">
  ...
</div>
<el-table>
  ...
</el-table>

示例：https://codepen.io/senolatac/pen/qBdGvRy

要在全屏模式下查看：https://codepen.io/senolatac/full/qBdGvRy

Answer 1

这个包模拟position: sticky的行为。

它在内部使用position: relative 并动态计算top。

例如您的场景：https://codepen.io/iattempt/pen/eYdpoMV （z-index: 4用于覆盖固定表列。）

您可以在这里查看更多用法：element-ui-sticky-table example on CodeSandbox