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

作者:开源拾贝时间:2026-10-23 13:07:21浏览:421

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

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

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


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

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

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

作者最新文章