解决Layui表格高度自适应及按钮遮挡问题

作者:开源拾贝

时间:2026-10-23

浏览:420

本文介绍如何解决Layui表格高度无法自适应导致按钮被遮挡的问题。通过移除field中的高度设置并添加特定的CSS样式,实现表格内容的垂直居中与高度自适应,确保界面布局正常显示。

文章目录

Layui表格高度自适应问题与CSS解决方案

在开发项目过程中,发现数据成功渲染到页面后,表格高度未能自适应,导致部分按钮被遮挡。经过反复调试和网络搜索,常规方法均无效,最终通过添加一段特定的CSS代码解决了该问题。


<style>
 .layui-table-cell{
   display:table-cell;
   vertical-align: middle;
 }
</style>

解决问题的关键在于不要在field属性中设置高度,允许自行设定宽度,这样即可实现表格高度的自适应。

以上即为解决Layui表格自适应高度问题的完整方案,希望能为读者提供参考与帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章