layui动态固定表格表头

最新推荐文章于 2024-07-25 14:21:05 发布

原创最新推荐文章于 2024-07-25 14:21:05 发布 · 2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

这段CSS代码用于实现一个具有固定表头的滚动表格。`.table-sticky-head`类为表格添加样式，设置tbody的高度并启用垂直滚动，隐藏webkit浏览器的滚动条，确保thead和tbody的显示为表格形式，并固定宽度。此代码适用于前端开发中，优化长表格的用户体验。

	.table-sticky-head .layui-table tbody{
		height: calc(100vh - 325px);
		display: block;
		overflow-y: scroll;
		overflow-x: scroll;
        width: 100vw;
	}
	.table-sticky-head .layui-table tbody::-webkit-scrollbar {
		display: none;
	}
	.table-sticky-head .layui-table thead,
	.table-sticky-head .layui-table tbody tr{
		display: table;
		width: 100%;
		table-layout: fixed;
	}
     .layui-table-auto .layui-table td{
        white-space: inherit!important;
    }