Layui表格行高line-height怎么设置

layui table行高不生效因内置height+padding控制，需用!important统一设置tbody/thead的height、line-height和padding，并同步校验表头、固定列、分页栏、弹出层表格对齐。

layui table 行高不生效？直接改 CSS 不行

layui 的 table.render() 渲染后，tr 和 td 的行高受其内置样式强控制，单纯给 .layui-table td 加 line-height 会被覆盖或不起作用——因为 layui 用的是 height + padding 组合撑开单元格，不是靠 line-height 垂直居中文字。

正确设置行高的两种方式（推荐后者）

必须从渲染配置或样式层穿透 layui 的默认规则：

• 方式一：在 table.render() 中用 cellMinWidth 配合 done 回调动态加 class
• 方式二（更稳）：用 !important 覆盖 layui 的 height 和 padding，同时统一设 line-height

示例（方式二）：

.layui-table tbody tr td {  height: 42px !important;  line-height: 42px !important;  padding: 0 15px !important;}.layui-table thead tr th {  height: 42px !important;  line-height: 42px !important;  padding: 0 15px !important;}

注意：height 和 line-height 必须一致，否则文字会偏移；padding 也要重置，否则和 height 冲突。

表格高度变化后表头错位？检查 fixed 列和 resize

加了自定义行高后，如果启用了 fixed: true 或列拖拽调整宽度，可能出现表头/表体不同步滚动、错位。这是因为 layui 的固定列逻辑依赖原始高度计算。

• 确保 thead th 和 tbody td 的 height 完全一致
• 避免只改 tbody 不动 thead，否则表头行高不变，视觉割裂
• 若使用 table.resize()，需在 resize 后手动触发一次 table.reload() 或重新应用样式

移动端适配时行高突然变小？别漏掉 media query

layui 默认没做响应式行高，PC 上设了 42px，手机上可能被缩放或 viewport 拉扯导致文字挤压。

• 加媒体查询单独处理小屏：@media (max-width: 768px) { .layui-table td { height: 36px !important; line-height: 36px !important; } }
• 禁用 zoom 或 transform: scale() 类样式，它们会让实际渲染高度失真
• 测试真机，不要只看 Chrome 模拟器——部分安卓 WebView 对 !important 解析有延迟

真正麻烦的不是设行高，而是设完之后要同步校验表头、固定列、分页栏、弹出层表格这四块是否还对齐。漏掉任意一个，用户一眼就能看出“这个表格有点歪”。