layui table 合计行位于 tfoot 中类名为 layui-table-total 的 tr 内,需用带 tfoot 上下文和 !important 的 CSS 覆盖样式,skin 参数会干扰,子元素背景或 line-height 不匹配亦影响显示效果。
layui table 合计行的 DOM 结构在哪
合计行不是表格数据的一部分,而是 layui.table 渲染后动态插入的 tfoot 里的一行 <tr>,类名固定为 layui-table-total。它不响应 cols 配置里的 style 或 templet,也不能用 done 回调直接操作 dom——因为此时它还没生成。
直接改 CSS 是最稳的方式
别试图在 render 或 done 里用 jQuery 找 .layui-table-total 再 css(),容易因渲染时机错位失效(比如分页重载、重绘后丢失)。正确做法是加一条全局 CSS 规则,用足够强的优先级覆盖默认样式:
.layui-table tfoot .layui-table-total {
background-color: #f8f9fa !important;
}
.layui-table tfoot .layui-table-total td {
border-top: 1px solid #e6e6e6;
}
- 必须带
!important,否则被 layui 内联样式压住 - 不要只写
.layui-table-total,要带上tfoot上下文,避免误命中其他同名元素 - 如果合计行文字颜色不对,顺手加
color;边框断开就补border-top
用 skin 参数会干扰合计行样式
如果你启用了 skin: 'line' 或 'row',layui 会给整个表格加额外 class,并重置 tfoot 的背景和边框。这时单靠上面的 CSS 可能不够,得加更具体的权重:
.layui-table[lay-skin="line"] tfoot .layui-table-total,
.layui-table[lay-skin="row"] tfoot .layui-table-total {
background-color: #f0f8ff !important;
}
-
lay-skin是属性选择器,不能省略中括号 - 不同 skin 对
tfoot的处理逻辑不一致,line 下常有细线干扰,row 下可能默认无背景 - 别指望
even/odd类名出现在合计行上——它永远只有layui-table-total
合计行内容太多时背景色会被遮盖
如果用了自定义合计模板(totalRow: true + cols 里某列设 totalRowText),而单元格里塞了 button 或 span,这些子元素的背景可能覆盖父 td 的背景色。
- 检查是否对
td子元素写了background,优先清掉或改用transparent - 必要时给
td加position: relative和z-index: 1确保层级 - 合计行高度变高后,
line-height不匹配也会让文字“浮”在背景上方,看着像没生效
.layui-table-total 这个 class,用带上下文的 CSS + !important,比任何 JS 操作都可靠。


















