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