DcatAdmin 表头固定

DcatAdmin 默认不提供固定表头的功能,可以通过自定义 CSS 来实现
本 CSS 来自 DcatAdmin 项目中另一个地方的样式。

将代码直接贴在需要固定表头的 Grid 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Admin::style(<<<STYLE
thead tr:nth-child(1) th {
background-color: #fff;
position: sticky;
top: 60px; // 顶部 Banner
z-index: 10;
}
thead tr:nth-child(2) th {
background-color: #fff;
border-bottom: 0;
position: sticky;
top: 101px; //手动计算的
z-index: 10;
}
STYLE
);

其中 top 是我手动计算的,可能要根据实际高度自行修改。或者有自适应的方法也欢迎提供。
效果如题所示:

Snipaste_2022-03-31_14-22-34.png

Author

feng

Posted on

2022-03-31

Updated on

2024-03-14

Licensed under

Kommentare