表头文字不换行且带悬浮提示需分层处理：thead用CSS实现省略号（white-space:nowrap/overflow:hidden/text-overflow:ellipsis），tbody对应列用templet同步截断并绑定layer.tips()模拟title，确保宽高一致、转义防XSS。
表头文字不换行 + 悬浮气泡提示，不能靠全局 css 一招通吃，必须分两层处理：thead 和 tbody 各走各的路。
为什么直接给 .layui-table th 加 title 不生效
浏览器原生 title 属性只对「可聚焦/可交互」元素（如 a、input）或设置了 display: inline-block/block 且有明确尺寸的容器才稳定触发。而 Layui 的 th 是 display: table-cell，内部文本被包裹在 <div class="layui-table-cell"> 里，但这个 div 默认没设宽高、没设 overflow，title 基本被忽略。
- 只加
white-space: nowrap会导致文字无限延展，撑破列宽 - 只加
title属性，多数浏览器根本不显示气泡（尤其 Chrome 120+） - 试图给
th加display: block会破坏表格布局，列错位
表头（thead th）强制单行 + 省略号的最小可行 CSS
必须同时满足三个条件才能让省略号出现，且不破坏布局：
-
white-space: nowrap—— 禁止换行 -
overflow: hidden—— 切掉溢出部分 -
text-overflow: ellipsis—— 显示省略号 - 还要确保
th有「有效宽度约束」：要么父容器限宽，要么列配置中设了minWidth（如{field:'name', title:'姓名', minWidth:100}）
推荐写法（加在你自己的 CSS 文件末尾，确保在 layui.css 之后加载）：
.layui-table-nowrap-header thead th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
然后在 table.render() 时给容器加 class：elem: '#demo', skin: 'line', className: 'layui-table-nowrap-header'。
表头文字悬浮提示只能靠 JS 模拟，别信纯 CSS 方案
原生 title 在 th 上不可靠，唯一稳定的方式是用 layer.tips() 绑定 mouseenter，但要注意复用陷阱：
- 必须在
done回调里绑定，确保 DOM 已渲染完成 - 只查当前表格内的
th，避免监听到已销毁的旧表格节点：$(that.elem).find('thead th') -
layer.tips()的time: 0，并手动用mouseleave关闭，否则 tips 残留 - 内容要转义：
layui.util.escape(d.title || '')，防 XSS
示例片段：
done: function(res, curr, count) {
$(this.elem).find('thead th').on('mouseenter', function() {
var text = $(this).text().trim();
if (text && text.length > 10) {
layer.tips(text, this, {tips: [1, '#333'], time: 0});
}
}).on('mouseleave', function() {
layer.closeAll('tips');
});
}
tbody 单元格也要同步处理，否则表头和内容对不齐
如果只改表头不改内容，会出现「表头缩略、内容撑开」导致列宽错乱。所以必须让对应列的 templet 也走省略逻辑：
- 给目标列加
templet，返回带title和截断样式的div -
max-width要和minWidth匹配（比如列设了minWidth: 120，那max-width: 120px） -
title中双引号必须转义为"，否则整列空白
例如：
{field:'desc', title:'描述', minWidth:120, templet: function(d) {
var text = d.desc || '';
return '<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:120px;" title="' +
text.replace(/"/g, '"') + '">' + layui.util.escape(text) + '</div>';
}}
真正麻烦的不是写几行 CSS 或 JS，而是表头和内容必须「样式一致、宽度一致、截断逻辑一致」——漏掉任何一环，视觉就裂开。移动端还要额外考虑 touchstart 替代 mouseenter，这点容易被跳过。
