要实现layui table表头文字居中但内容居左，需用[data-field]属性精准选择器配合!important：.layui-table thead th[data-field="name"]{text-align:center!important;}.layui-table tbody td[data-field="name"]{text-align:left!important;}
layui table 表头文字居中但内容居左的 CSS 优先级问题
直接加 text-align: center 到表头样式上没用，是因为 layui 内部给 .layui-table th 和 .layui-table td 都设了默认 text-align: center，且带 !important。你写的样式会被覆盖。
必须用更高权重的选择器，或者利用 layui 提供的列配置项绕过 CSS 冲突。
- 推荐优先用
templet或style字段控制单列对齐，避免全局污染 - 如果要用 CSS，得写成
.layui-table thead th+!important，且确保你的样式表在 layui.css 之后加载 - 注意：layui 2.8+ 的
headers配置不支持直接设对齐，别白试
用 column.style 控制单列文本对齐（推荐）
layui.table 的列定义支持 style 字段，它会直接作用于该列所有单元格（包括表头和内容），但你可以用伪类区分：
cols: [[
{ field: 'name', title: '姓名', style: 'text-align: left;' },
{ field: 'status', title: '状态', style: 'text-align: center;' }
]]
这样写会让整列都左对齐——但表头也跟着左了。要「表头居中、内容居左」，得拆开处理：
- 给列加
templet：用函数返回带内联样式的<div style="text-align:left">{{d.name}}</div> - 同时用 CSS 单独锁定表头：
.layui-table thead th[data-field="name"] { text-align: center !important; } -
data-field值必须和列的field完全一致，大小写敏感
用 CSS 选择器精准命中表头与单元格
layui 渲染后，表头 th 和内容 td 都有 data-field 属性，这是最稳的钩子。
下面这段 CSS 能真正实现「指定列：表头居中、内容居左」：
.layui-table thead th[data-field="name"] {
text-align: center !important;
}
.layui-table tbody td[data-field="name"] {
text-align: left !important;
}
- 必须加
!important，否则被 layui 默认样式压制 - 不要用
.layui-table th这种泛选，会误伤其他列 - 如果表格启用了
skin: 'line'或'nob'，class 名不变，该规则仍有效
为什么不用 table.render 的 headers 配置？
因为 headers 是用来做「多级表头」的，不是设置样式。它生成的是嵌套 th，不带对齐控制能力；强行往里塞 style 会失效，且破坏响应式布局。
另外，别碰 defaultToolbar 或 done 回调里用 JS 动态改 class——渲染完成后再操作 DOM，容易被 layui 下次重绘覆盖，尤其开启分页或排序时。
真正稳定的方式就两个：列级 templet + 精确 data-field CSS，二者配合用一次就生效，不依赖时机，也不怕重绘。
