Layui表格如何实现表头文字的多行排列显示

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，虽然麻烦点，但可控性高得多。