如何使表头始终在顶部? [英] How to make table header always on top?

查看:63
本文介绍了如何使表头始终在顶部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使表格标题始终位于 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆