Layui表格合计行如何自定义背景颜色和字体-Layui教程-PHP中文网

Layui合计行样式只能通过CSS覆盖或done回调动态设置，推荐使用高优先级CSS选择器如.layui-table-total tr和.layui-table-total tr td并加!important；templet方式可实现单列条件着色。

合计行 background-color 和 color 无法用 totalRowStyle 控制

layui 的 totalrow 不提供类似 rowstyle 或 cellstyle 的样式回调，它只负责渲染合计值，不暴露样式钩子。你写 totalrowstyle: function() {...} 是无效的——这个配置项根本不存在。

真实生效的方式只有两种：CSS 覆盖，或在 done 回调里手动加 style/class。但后者有严重隐患：分页、排序、reload 后合计行 DOM 会被重建，样式丢失。

必须用高优先级 CSS 选择器精准命中合计行的 <tr>，例如：<code>.layui-table-total tr 或更具体的 #myTable .layui-table-total tr
合计行固定带有 class layui-table-total，其内部 tr 没有额外 class，所以不能靠 :nth-child 区分多行合计（Layui 目前只支持单行合计）
避免用 !important，除非你确认 Layui 某个版本给 .layui-table-total tr 写了带 !important 的内联样式（2.8+ 版本未见）

推荐 CSS 写法：直接作用于合计行 tr 和 td

合计行结构是 <tbody class="layui-table-total"><tr> <td>合计</td> <td>123</td> </tr></tbody>，所以样式要写在 tr 和 td 上，而不是 th。

示例（深蓝底 + 白字 + 加粗）：

.layui-table-total tr {
  background-color: #1890ff !important;
}
.layui-table-total tr td {
  background-color: #1890ff !important;
  color: #fff !important;
  font-weight: bold;
}

必须加 !important：因为 Layui 会给 td 设置默认背景色（通常是白色），且部分版本会内联写死 style="background-color: #fff"
不要只设 tr 背景：某些浏览器下 tr 的背景会被 td 覆盖，必须同时设 td
字体颜色和加粗必须写在 td 上，tr 不继承 color

用 done 回调动态加样式？风险极高，仅限简单场景

如果合计逻辑依赖后端返回的某个字段（比如 “是否超预算”），需要条件式着色，那只能在 done 里操作。但要注意：每次 reload、分页、搜索都会触发 done，你得确保重复执行不报错、不叠加样式。

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

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

下载

先清掉旧样式：that.find('.layui-table-total tr').removeAttr('style').find('td').removeAttr('style')
再根据 res.total 或 res.data 判断条件，例如：if (res.total?.amount > 100000) { $tr.css('background-color', '#fff3cd') }
别用 addClass：Layui 没为合计行预设对应 CSS 类，加了也没用；必须用 css() 直接写内联样式
此方式在虚拟滚动开启时可能失效，因合计行未必在视口内，find 可能找不到

合计单元格单独设色？用 templet + 条件判断

如果你只想改某一个合计单元格（比如只让“金额”列合计变红），最稳的方式不是动整行，而是用 templet 替换该列合计内容，并包裹带样式的 <div>。 <p>例如：</p> <pre class="brush:php;toolbar:false;">{ field: 'amount', title: '金额', totalRow: true, templet: function(d) { if (d.type === 'total') { return '<div style="color: #f5222d; font-weight: bold;">' + d.amount + '</div>'; } return d.amount; } }</pre> <ul> <li> <code>d.type === 'total' 是识别合计单元格的唯一可靠方式（Layui 2.8+ 支持）