layui table表头文字换行需覆盖white-space:nowrap和固定height，用CSS设white-space:normal、height:auto、line-height及padding，并通过data-field精准选择器加!important生效。
layui table 表头文字换行显示不了？关键在 CSS 覆盖和 white-space
默认情况下，layui table 的表头（th）强制设了 white-space: nowrap 和固定高度，文字再长也挤成一行，甚至溢出隐藏。这不是 bug，是 layui 为紧凑布局做的默认约束，但确实不支持多行标题。
要实现“多行排列”，本质是让表头单元格允许换行、撑开高度，并保持对齐。核心不是改 layui 源码，而是用 CSS 精准覆盖它的几处限制：
-
white-space: normal或break-spaces（让空格/换行符生效） - 去掉
height或设为auto（否则内容被截） - 补上
line-height和padding防止文字贴边 - 必要时加
vertical-align: middle对齐内容
怎么给特定列的表头加换行？用 field 或 lay-data 绑定 class
直接在 cols 配置里用 templet 渲染表头不可行（layui 不支持表头模板），正确做法是利用 field 值生成唯一 CSS 类名，或用 lay-data 添加自定义属性，再写针对性样式。
示例：想让「用户基本信息」这列表头两行显示：
cols: [[
{field: 'userInfo', title: '用户基本信息', width: 150}
]]
对应 CSS：
.layui-table th[data-field="userInfo"] {
white-space: normal !important;
height: auto !important;
line-height: 1.4;
padding: 8px 12px;
}
注意：!important 是必须的，因为 layui 内联样式优先级高；data-field 值来自配置里的 field，大小写敏感。
用 \n 或 <br> 在 title 里换行？别试，layui 会自动转义
title: '用户\n信息' 或
title: '用户<br>信息'完全无效——layui 渲染表头时会对
title 做 HTML 转义，\n 变成空格，<br> 变成纯文本。
真正起作用的只有 CSS 控制的自然换行，依赖中文断行或英文单词间的空格。所以：
- 中文标题可写成
title: '用户 基本 信息'（靠空格触发换行） - 英文标题建议用
title: 'User Info' - 若必须精确控制断点，用零宽空格
插入断行点，它不可见但允许换行
表格重绘后样式丢失？记得在 done 回调里重新应用 CSS
当调用 table.reload()、切换分页、或开启 page: true 后，layui 会销毁并重建整个表格 DOM，你之前写的 CSS 如果依赖动态插入或 JS 注入，可能失效。
稳妥做法是把关键样式写进全局 CSS 文件，或在 done 回调里手动加 class：
table.render({
// ...其他配置
done: function() {
// 确保表头样式始终生效
$('.layui-table th[data-field="userInfo"]').css({
'white-space': 'normal',
'height': 'auto'
});
}
});
不过更推荐前者——CSS 一次性写对，比每次 JS 补救更稳定。
最麻烦的其实是合并表头（rowspan/colspan）场景，layui 对它的支持很弱，CSS 换行容易错位。这种需求建议直接放弃 layui 原生表头，改用自定义 toolbar + 手动拼接表头 HTML，虽然麻烦点，但可控性高得多。
