layui table 表头与数据行对齐需分离控制：用 templet 自定义数据行对齐，css 覆盖（如 .layui-table th:nth-child(n) {text-align:left !important}）控制表头对齐。
layui table 的 align 和 title 对齐不一致怎么解决
表头文字左对齐、数据行右对齐，是常见需求，但 Layui 的 table.render() 默认会把 align 同时作用于 thead 和 tbody，没法分开控制。
根本原因：Layui 没提供独立的 headerAlign 配置项，align 是“一管到底”的。想拆开，得绕过默认渲染逻辑。
- 最稳妥的做法是用
templet自定义列内容，手动加style="text-align:right"或 class 控制单元格对齐 - 表头对齐只能靠 CSS 强制覆盖，比如给
.layui-table th:nth-child(2)加text-align: left !important - 别试图改 Layui 源码或 hook
table.css—— 升级后就失效，且容易破坏其他表格样式
用 templet 控制单列数据行对齐（推荐）
这是唯一能精准控制某列内容对齐方式、又不污染全局样式的方法。适用于数字列右对齐、操作列居中等场景。
示例：第二列数字右对齐，表头仍保持居中
layui.table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'price', title: '金额', templet: '<div style="text-align:right">{{d.price}}</div>'},
{field: 'op', title: '操作', templet: '<div style="text-align:center"><button class="layui-btn layui-btn-xs">编辑</button></div>'}
]]
});
-
templet字符串里必须用双引号包裹整个模板，内部用单引号或转义 - 不要写成
templet: function(d) { return '<div style="...">' + d.price + '</div>'; }—— Layui 2.8+ 对函数型 templet 的样式支持不稳定，容易丢失内联样式 - 如果用了
cellMinWidth或固定列，确保内联div不触发换行导致高度异常
用 CSS 覆盖表头对齐（仅限简单场景）
当所有列都需统一表头对齐（比如全左对齐），而数据行按列单独对齐时，CSS 覆盖是最轻量的方式。
关键点：必须带 !important，且选择器要足够具体，否则被 Layui 内联样式压住
- 全局表头左对齐：
.layui-table thead th { text-align: left !important; } - 仅第 3 列表头居中：
.layui-table thead th:nth-child(3) { text-align: center !important; } - 避免用
.layui-table th这种泛选择器 —— 会影响排序图标、复选框等内置元素的布局 - 如果开启了
skin: 'line'或'row'，对应皮肤下的th样式类名不同，需检查实际 DOM 结构再写选择器
为什么不用 style 直接写在 cols 里
有人试过在列配置里加 style: 'text-align:left'，发现完全无效 —— 因为 Layui 的 style 字段只作用于 td 元素的内联样式，但表头是 th，且该字段在 2.8 版本后已被标记为“非标准用法”，文档未声明、行为不可靠。
- 实测：加了
style的列，th无变化，td也未必生效，取决于是否启用了templet或toolbar - 更隐蔽的坑：
style会和minWidth/width冲突，导致列宽计算错误，尤其在响应式缩放时出现横向滚动条 - 真要动态控制样式，优先走
templet+ 数据判断，比如{{ d.status === 1 ? 'color:green' : 'color:red' }}
templet + 精确 CSS 覆盖就是目前最可控的组合。注意 nth-child 的序号要和 cols 数组下标对齐，手抖写错一位，整列就失联。
