Layui如何修改表格单元格内文字的行间距

优先在列定义中设置style属性调整行高，如{field:'name',title:'姓名',style:'line-height:24px;'}；全局统一则用.layui-table tbody .layui-table-cell{line-height:1.6;}，避免影响表头和布局。layui table 单元格文字行高太小，怎么调？直接改 line-height 就行，但不能只改表格容器或全局 .layui-table td —— 会破坏表头对齐、复选框垂直居中，甚至让带图标的操作列错位。真正生效且安全的方式是精准作用于单元格内容层。Layui 渲染后，单元格内文字默认被包在一层 <div class="layui-table-cell"> 或直接是文本节点，但更稳的钩子是给列配置 templet，或用 CSS 选择器命中内容区域。优先在列定义里加 style：比如 {field: 'name', title: '姓名', style: 'line-height: 24px;'}若需全局统一，用 CSS 覆盖（注意权重）：.layui-table tbody .layui-table-cell { line-height: 1.6;}避免写 .layui-table td { line-height: 24px; } —— 表头 th 也会被影响，导致文字上浮为什么用 templet 自定义模板能彻底控制行距？因为 templet 让你完全接管单元格 HTML 输出，不再依赖 Layui 默认的包裹逻辑。哪怕只是简单换行或加个 <span>，也能把 line-height 锁死在内容内部，不影响外层布局。基础写法：{field: 'remark', title: '备注', templet: '<div style="line-height: 1.8;">{{d.remark}}</div>'}如果字段值含 HTML 需转义，改用函数形式：templet: function(d) { return '<div style="line-height: 1.8;">' + layui.util.escape(d.remark) + '</div>';}函数方式还能做空值判断、多行截断等，比字符串模板更可控修改后表格高度异常或滚动条错乱怎么办？Layui 表格高度计算依赖单元格默认行高，硬改 line-height 后，layui.table.resize() 可能不自动重算，尤其开启 height 固定高度时。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。