如何使表头始终位于顶部？

Question

我正在尝试在 Element UI 中使表格标题始终位于顶部。我已经尝试过来自经典 css 的解决方案，例如：position: stiky; for th，但它不适用于 Element UI。表格将继续滚动它的标题。

这是我的代码https://jsfiddle.net/wb06nm51/

Answer 1

有两种方法可以实现。

首先是element-ui指定的方式，在el-table上指定表格的高度：https://element.eleme.io/#/en-US/component/table#table-with-fixed-header

第二个是像你一样使用css，但你已经考虑到element-ui创建了2个表，1个用于标题，1个用于正文。必须应用的正确 css 如下：

.el-table__header-wrapper {
  z-index: 100;
  position: fixed;
  top: 0;
}

// Neede to show the first row in the table
.el-table__body-wrapper {
   margin-top: 50px;
}

要让它在你的小提琴中工作，请确保你还导入了正确的 css：

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");