layui table表头样式需兼顾常规态、折叠态、重载态和主题切换态；优先用headers.style内联样式，改CSS变量控制背景色，折叠态需单独处理.layui-table-col-spread样式。
layui table 表头文字不居中或错位
表头文字默认左对齐，且行高、内边距和字体大小可能和业务设计不一致。直接改 layui-table-header 或 layui-table-th 的 css 很容易被 layui 内部样式覆盖，尤其是重渲染后（比如 resize、分页、重载数据）会回退。
- 优先用
headers配置项里的style属性：支持内联样式字符串，稳定生效，不受重绘影响 - 避免全局污染：不要直接写
.layui-table-th { text-align: center !important; }，!important容易在多表格场景下互相干扰 - 若必须用外部 CSS，选择更具体的路径：
.layui-table-view .my-table .layui-table-th，并确保样式表加载在 layui.css 之后
layui table 表头背景色/边框失效
layui 2.8+ 默认启用了「主题色」机制，table 表头背景由 --layui-table-header-bg-color CSS 变量控制，直接设 background 可能被变量覆盖；边框则受 border-collapse: collapse 和子元素 th > div 的 padding 影响。
- 修改 CSS 变量最稳妥：
:root { --layui-table-header-bg-color: #f8f9fa; --layui-table-header-color: #495057; } - 若只改单个表格，给容器加 class（如
my-table），再写：.my-table .layui-table-header { background-color: #e9ecef !important; } .my-table .layui-table-th > div { border-right: 1px solid #dee2e6; } - 注意：layui 2.7 以下版本不支持 CSS 变量，得降级用传统属性 +
!important
layui table 表头图标（排序/筛选）位置偏移
自定义表头样式后，layui-icon 图标常因 line-height、vertical-align 或父级 padding 不匹配而上下错位，尤其在设置了 height 或 line-height 的 th 上。
- 图标默认靠右，但垂直居中依赖父级
line-height和padding匹配；建议统一用padding: 0 12px替代height + line-height - 修复错位最简单方式：给
.layui-table-th .layui-table-sort加top: 50%; transform: translateY(-50%);
- 如果用了自定义筛选按钮（比如下拉箭头），确保其外层
div没有设置display: flex但没配align-items，这会导致图标和文字不对齐
layui table 表头响应式折叠后样式丢失
开启 responsive: true 后，小屏幕下表头会被替换为「列名 + 切换箭头」的折叠结构，此时原 th 样式完全不生效，新 DOM 是动态插入的 .layui-table-col-spread 元素。
- 必须单独处理折叠态表头：
.layui-table-col-spread { background-color: #f8f9fa; color: #495057; font-weight: 600; } - 折叠按钮（
.layui-table-col-spread .layui-icon）默认是灰色，可覆盖color，但注意它和文字共用一个line-height，调高需同步改文字padding - 这个区域没有
th的宽度继承逻辑，列宽需通过minWidth或width在列配置里固定，否则折叠后文字挤在一起
