如何使表头始终在顶部? [英] How to make table header always on top?
问题描述
我正在尝试使表格标题始终位于 Element UI 的顶部.我已经尝试过经典 css 的解决方案,例如: position: stiky;
for th
但它不适用于 Element UI.表格将继续滚动其标题.
I am trying to make table header always on top in Element UI. I have tried solutions from classic css like: position: stiky;
for th
but it does not work for Element UI. The table is continue to scroll with it's header.
这是我的代码 https://jsfiddle.net/wb06nm51/
推荐答案
有两种方法可以实现.
先按element-ui指定的方式,在el-table上指定table的高度:https://element.eleme.io/#/en-US/component/table#table-with-fixed-header
First the way specified by element-ui, and specify the height of the table on el-table: https://element.eleme.io/#/en-US/component/table#table-with-fixed-header
第二是像您一样使用 css,但您已经考虑到 element-ui 创建了 2 个表,1 个用于标题,1 个用于正文.必须应用的正确 css 如下:
Second is to use css as you did, but you have take into account that element-ui creates 2 tables 1 for the header and 1 for the body. the correct css that has to be applies is the following:
.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:
To make it work in your fiddle make sure you also import the right css:
@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
这篇关于如何使表头始终在顶部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!