layui数据表格怎么设置不同行的高度-Layui教程-PHP中文网

必须同时覆盖tbody、thead及固定列的height和line-height并用!important，且数值严格相等；特殊行高需在done回调中用settimeout延迟设置tr高度并清line-height；移动端须加媒体查询适配；修改后需校验四点对齐并调用tableins.resize()。

layui数据表格怎么设置不同行的高度

直接用 CSS 强制覆盖行高会错位

单纯给 .layui-table tbody tr td 加 height 或 line-height，大概率失效——Layui 渲染时会往 tr 和 td 上写行内 style="height: 40px"，CSS 优先级不够；更麻烦的是，只改 tbody 不动 thead，表头和内容行高不一致，视觉割裂，滚动时还会错位。

必须同时处理三处：tbody tr td、thead tr th、以及固定列（如果启用了 fixed: "left" 或 "right"）对应的 .layui-table-fixed-* .layui-table td/th。

正确做法是用 !important 覆盖，并确保 height 和 line-height 数值严格相等：

.layui-table tbody tr td,
.layui-table thead tr th {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
}
.layui-table-fixed-l .layui-table td,
.layui-table-fixed-l .layui-table th,
.layui-table-fixed-r .layui-table td,
.layui-table-fixed-r .layui-table th {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
}

想让某几行“特别高”，得靠 done 回调动态设

Layui 不支持按数据字段条件直接配置不同行高，必须在表格渲染完成后再手动干预。核心逻辑是：遍历每行 → 找出该行所有 td 中内容撑开的最高值（scrollHeight）→ 给整行 tr 设高度 + 清掉 line-height。

常见错误包括：done 里没加 setTimeout 导致 DOM 还没真正渲染完；只设了 height 没清 line-height，文字上下留白错位；漏掉固定列表头同步。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

用 setTimeout 延迟一帧，确保 td 内容已挂载
对每行取 $(tr).find('td').map(...).get().reduce(Math.max) 得最大内容高度
设 $(tr).height(maxH + 12)（+12 补 padding 余量），并显式加 line-height: normal
若启用 fixed，还得单独处理 .layui-table-fixed-l tbody tr 等选择器

移动端行高突然变小？别只写一套 CSS

PC 上设了 48px，手机上可能因 viewport 缩放、字体渲染差异或 WebView 对 !important 解析延迟，导致实际高度塌缩。Layui 默认无响应式行高逻辑。

必须加媒体查询单独适配：

@media (max-width: 768px) {
  .layui-table tbody tr td,
  .layui-table thead tr th {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 8px !important;
  }
}

注意：transform: scale()、zoom 类样式会让真实渲染高度失真，真机测试前务必禁用；Chrome 模拟器不等于真实安卓 WebView，部分机型对 !important 有毫秒级延迟，建议加 transition: height 0s 避免闪动。