layui表格怎么自定义表格行的高度line-height-Layui教程-PHP中文网

layui.table 的 lineStyle 配置必须设为 false 才能真正释放行高控制权，否则默认内联样式会强制锁定 td 高度；关闭后需同时设置 height 和 line-height 且值相等，并通过 rowStyle + skin: 'nob' 实现动态行高，done 回调中 setTimeout 保证三处表格 tr 高度同步。

layui表格怎么自定义表格行的高度line-height

layui.table 的 lineStyle 配置必须设为 false 才能真正释放行高控制权

默认情况下，Layui 2.7+ 会自动注入 lineStyle: 'height: 40px;'（或类似固定值），它以行内样式强制锁定所有 高度，CSS 中写的 line-height 或 height 全部被覆盖。想自定义行高，第一步不是写 CSS，而是关掉这个“自动锁”。

正确做法是显式声明：lineStyle: false。不要写成 lineStyle: 'height: auto;'——Layui 内部对非 false 值仍可能 fallback 到默认像素值。



删掉配置中任何 lineStyle 字段，等效于 false

如果保留 lineStyle，只接受 false，其他字符串（包括空字符串）都不可靠
关闭后，.layui-table-cell 的高度才真正由你写的 CSS 或 JS 控制

用 CSS 控制行高时，必须同时设置 height 和 line-height 且值相等
只改 line-height 不行，因为  是 display: table-cell，它的垂直居中依赖 height 和 line-height 严格一致。否则文字会上浮、下沉或留白错位。
例如统一设为 36px：

.layui-table-cell {
  height: 36px;
  line-height: 36px;
}
避免使用 min-height：对 table-cell 无效，且会被父级  的 height 覆盖
若需多行文本，改用 height: auto; line-height: 24px; white-space: normal; word-break: break-word;

表头单独控制：th.layui-table-cell 或更精确的 th.laytable-cell-1-0-0（列索引查 DOM）
动态行高必须用 rowStyle + skin: 'nob'，否则 height 不生效
要根据数据字段（如 row.status === 'urgent'）设不同高度，唯一可靠路径是 rowStyle 回调配合 skin: 'nob'。漏掉 skin: 'nob' 是最常见失败原因——默认皮肤的 border-collapse: collapse 会让 height 失效。
rowStyle 返回对象示例：

											
												
												
													深蓝色网站后台管理系统layui框架模板-AdminPro
													一款深蓝色网站后台管理系统layui框架模板
												
												下载
												
											
										
rowStyle: function(row) {
  if (row.level === 'high') {
    return { class: 'row-high' };
  }
}

CSS 必须显式写死：.row-high td { height: 56px; line-height: 56px; box-sizing: border-box; }

不能只写 .row-high { height: 56px; }， 上的 height 对 table-cell 子元素不直接传导
若开发者工具里看到 tr 的 display 不是 table-row，补上 .row-high { display: table-row !important; }

内容撑开高度必须在 done 回调中 setTimeout(, 0) 后测量并同步三套 tr
Layui 表格实际渲染出 6 个 
（主表、左/右固定列、序号列等），它们的  高度必须完全一致，否则滚动错位、hover 错行。单纯改 CSS 或只操作 .layui-table-main 不够。实操步骤：

在 done 回调里用 setTimeout(() => { ... }, 0) 确保 DOM 已挂载完毕
遍历当前页每行，取该行所有 td 的 scrollHeight 最大值，加 8–12px 余量
同步设置三处：.layui-table-main .layui-table tr、.layui-table-fixed-l .layui-table tr、.layui-table-fixed-r .layui-table tr

同时设 line-height: normal，否则旧 line-height 会拉扯文字位置

复杂点在于：表格内部尺寸同步有延迟，DOM 挂载完 ≠ 尺寸就绪；固定列结构隐蔽，漏一处就会视觉割裂。别省这一步。