Layui表格怎么设置合计行（totalRow）的文字靠左对齐并加粗-Layui教程-PHP中文网

合计行文字靠左对齐且加粗：优先用layui 2.8+的totalRow: {align: 'left'}（仅对内置数值列生效），通用方案是在done回调中执行$('.layui-table-total td').css({'text-align': 'left', 'font-weight': '600'})，或使用CSS选择器.layui-table-total td {text-align: left !important; font-weight: 600 !important;}确保样式生效。

合计行文字靠左对齐：必须用 `done` 回调或 `totalRow: {align: 'left'}`

layui 2.8+ 版本起，totalrow 配置支持 align 字段，但仅对内置数值累加列生效（即列定义里写 totalrow: true，且后端返回纯数字）。若你用了自定义 totalrow 函数或模板字符串，这个配置就无效。

更通用、兼容所有版本的做法是在 done 回调里手动改样式：

确保表格渲染完成后再操作：done: function(){ $('.layui-table-total td').css({'text-align': 'left', 'font-weight': '600'}); }
不要在 render() 外层直接执行，此时 .layui-table-total 还没生成
如果表格启用了 table.reload()，每次重载后都得重新执行这句 —— 它不是一次设置永久生效
避免用 setTimeout 延迟，时机不可控，尤其在低配设备或慢网下容易失效

合计行文字加粗：别碰全局 `.layui-table th`，精准控制 `.layui-table-total`

直接给 .layui-table th 加 font-weight 对合计行没用，因为合计行的 td 在 .layui-table-total 容器里，样式作用域不同。强行全局加粗还会误伤表头。

正确做法是只针对合计行单元格：

用 CSS 类名 + !important 最稳：

.layui-table-total td { text-align: left !important; font-weight: 600 !important; }

如果只想某几列加粗左对齐（比如「名称」列要左对齐+加粗，「金额」列要右对齐+加粗），就得按 data-field 分开写：

.layui-table-total td[data-field="name"] { text-align: left !important; font-weight: 600 !important; }<br>.layui-table-total td[data-field="price"] { text-align: right !important; font-weight: 600 !important; }

注意：CSS 必须放在 layui.css 之后加载，否则被覆盖

自定义合计内容时对齐和加粗失效？问题不在 JS，而在容器样式压住了

当你在列定义中写 totalRow: function(d){ return '小计：¥'+(d[0]+d[1]).toFixed(2); }，Layui 不会再走内置对齐逻辑，但返回的字符串仍被塞进居中样式的 td 里 —— 所以你看到的还是居中、不加粗，不是“没生效”，是“被父容器样式锁死了”。

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

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

下载

这时有两个选择：

给函数返回值加内联样式：return '<div style="text-align:left;font-weight:600">小计：¥'+...+'</div>';，然后配合 templet 或 CSS 清除默认 td 的 padding/margin 干扰
统一加 class：return '<span class="total-left-bold">小计：¥'+...+'</span>';，再配 CSS：
```
.total-left-bold { display: inline-block; text-align: left; font-weight: 600; }
```
千万别在 totalRow 函数里拼 style="..." 然后期望它自动继承到外层 td —— 它只作用于你返回的 HTML 片段内部

为什么改了还是没变？八成是渲染时机或选择器范围错了

最常踩的坑不是代码写错，而是作用对象不对：

$('.layui-table-total td') 匹配不到？检查是否在 done 之外执行，或表格数据为空（空数据时 layui 根本不渲染 .layui-table-total）
加了 !important 还是无效？打开 DevTools 看 computed styles，确认你的 CSS 文件确实加载了，且没有更高权重的选择器（比如 #app .layui-table-total td）把它干掉了
移动端缩放后对齐错位？那是 td 宽度计算异常导致的，合计行的 td 必须和主表列宽严格一致，不能靠 CSS 强撑，要用 JS 动态读取 $('.layui-table-header th').eq(i).outerWidth() 设置