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

Posted 2023-02-22

【中文标题】如何使表头始终位于顶部？

【英文标题】：How to make table header always on top?

【发布时间】：2020-06-27 09:58:16

【问题描述】：

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

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

【参考方案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");