优先在列定义中设置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"> 或直接是文本节点，但更稳的钩子是给列配置 <code>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></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 固定高度时。

• 手动触发重绘：

  layui.table.resize('yourTableId');

• 如果用了 cellMinWidth 或自定义宽度，检查是否因行高变大导致文字换行，进而撑开列宽 —— 此时可加 white-space: nowrap; 临时验证
• 移动端要注意：过大的 line-height（如 2.5）会让点击热区变薄，手指操作易误触相邻行

兼容性坑：IE11 下 line-height 不生效？

不是不生效，是 IE11 对 flex 布局下的 line-height 解析有偏差。Layui 的操作列、复选框列默认用 display: flex 居中，此时单纯设 line-height 会被忽略。

• 解决方案：加 align-items: center; 到父容器（即 .layui-table-cell），和 line-height 配合使用
• 或者退一步，用 padding-top + padding-bottom 模拟行高，虽然不够语义化但 IE11 稳定
• 别忘了测试 checkbox 和开关组件 —— 它们的基线可能偏移，需要额外微调 vertical-align

改行间距这事，看着是调一个 CSS，实际牵扯到表格渲染逻辑、Flex 对齐机制、甚至 IE 的历史包袱。最保险的路径是：单列用 templet 控制，全局用带权重的 .layui-table tbody td，改完立刻跑一遍固定高度 + 滚动 + 移动端点击测试。