layui表格行高需在done回调中通过dom操作动态计算并设置,因渲染后tr有固定height行内样式覆盖css;须分别处理主表、左右固定列三处tr,且resize和重渲染后均需重新计算。
不能靠 height: auto 或 line-height css 一招解决——layui 表格的行高由 js 控制,必须配合 done 回调 + dom 操作 + 列宽预估逻辑才能真正撑开。
为什么直接写 CSS 不生效
Layui 渲染后会为每行 <tr> 设置固定 <code>height 行内样式(比如 height: 36px),CSS 的 height: auto 被强制覆盖;.layui-table-cell 的 line-height 只影响文字垂直居中,不改变行高本身。表头和固定列(.layui-table-fixed-l/r)的 DOM 结构是分离的,必须分别处理三处 <tr> 集合。<h3>done 回调里怎么动态算行高</h3>
<p>核心是估算每行内容在当前列宽下需要几行显示,再乘以单行基准高度(通常 28–36px)。关键参数:字体大小(一般 14px)、列实际宽度(需减去 padding 和边框)、字段内容长度(字符数或字节数)。</p>
<ul>
<li>先用 <code>$(this.elem).closest('[lay-table-id]').attr('lay-table-id') 拿到当前表格 ID,避免硬编码
res.data,对每个字段做换行预估:Math.ceil((str.length * 14) / (colWidth - 40))(-40 是左右 padding + 边框预留)32),再加上下 padding(建议 +12).layui-table-main .layui-table tr、.layui-table-fixed-l .layui-table tr、.layui-table-fixed-r .layui-table tr
固定列和响应式下的坑
固定列(fixed: 'left' 或 fixed: 'right')的 <tr> 不在主表体里,漏掉就会错位;窗口缩放后列宽变化,但 <code>done 不会自动重触发——必须手动监听 resize 并调用 tableIns.resize(),再在 resize 后再次执行行高重算逻辑。
- 不要用
minWidth做列宽依据——它只是最小值,实际渲染宽度可能更大(尤其内容短时) - 如果用了
toolbar或totalRow,它们的<tr> 也要单独设高,否则视觉割裂<li>IE 下 <code>getComputedStyle获取列宽不准,建议在cols配置里显式写死width或统一用minWidth作为计算基准
更轻量的替代方案(适合纯文本场景)
如果字段内容全是短文本、换行极少,可跳过复杂计算,改用 CSS + 少量 JS 强制撑开:
.layui-table-body .layui-table tbody tr {
height: auto !important;
}
.layui-table-cell {
white-space: normal !important;
word-break: break-word !important;
padding: 8px 15px;
}
然后在 done 里补一句:$(this.elem).closest('.layui-table-view').find('.layui-table-body').css('max-height', 'none'),防止 layui 自动加滚动条截断内容。但这招对长文本、多字段混排、含按钮/开关的列容易失准,慎用于生产环境。
最麻烦的不是算高度,而是每次调用 table.render() 或 table.reload() 后,所有行高都会被重置——你得确保每次渲染完成都走一遍 done 里的重设逻辑,包括分页切换、搜索、排序触发的重绘。











