表头文字单行省略号+hover气泡需同时满足：th设minWidth、overflow:hidden、white-space:nowrap、text-overflow:ellipsis，并用templet包裹内容添加动态title，禁用display:block/inline-block以免破坏表格布局。
为什么表头文字会换行，而你加了 white-space: nowrap 还没用
因为 layui 的 th 默认是 display: table-cell，它对 text-overflow: ellipsis 的支持有前提：必须同时满足「有明确宽度约束」+「overflow: hidden」+「white-space: nowrap」。只加 white-space: nowrap 会让文字无限横拉，撑破列宽，甚至拖出表格边界。
常见错误现象包括：th 文字挤成一行但看不到省略号、表头和 tbody 列宽错位、鼠标 hover 没气泡提示。
- 必须为每列配置
minWidth（如{field: 'name', title: '姓名', minWidth: 100}），仅靠 CSS 不足以触发截断 - 不要给
th加display: block或inline-block—— 会破坏 table 布局，导致表头与内容列不对齐 - 浏览器原生
title属性在th上默认生效，但仅当文字真正溢出且容器被裁剪时才显示气泡；如果列宽自适应撑开了，就永远不触发
怎么让表头文字单行 + 省略号 + hover 气泡三者同时生效
核心是两层控制：CSS 控制视觉截断，JS（或模板）补足气泡信息源。layui 表头本身不支持在 title 里动态写内容，所以得靠额外包裹。
推荐做法是给表格容器加自定义 class，再配合列级 templet 微调：
- 在表格容器上加 class：
<div class="layui-table-nowrap-header"><table>...</table></div> - CSS 中写：
.layui-table-nowrap-header thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 对需要精确控制的列，在
cols里用templet返回带title的div：{field: 'desc', title: '描述', minWidth: 120, templet: '<div title="{{d.desc}}">{{d.desc}}</div>'} -
templet中的title值必须做双引号转义：title="{{d.desc.replace(/"/g, '"')}}"，否则 HTML 解析失败，整列空白
为什么不能只靠全局 CSS 给 th 加 title
因为 layui 渲染时，th 标签里的文本是静态的（来自 title 配置项），无法绑定每行数据的原始值。你看到的「气泡内容」只能是列名本身，不是该列实际展示的长文本 —— 这就失去了提示意义。
例如「操作」列标题是「操作」，你 hover 只能看到「操作」两个字，而不是某一行具体的按钮文案。
- 表头
th的title是固定字符串，无法响应数据变化 - 真正有用的气泡，必须来自
tbody单元格内容，而表头只是「同步样式」，起对齐和视觉一致性作用 - 如果你只要表头提示列名含义，直接在
title配置里写全称即可，比如title: '用户详细备注信息（最多200字）'，无需额外处理
移动端或需要自定义气泡样式时怎么办
原生 title 在 iOS Safari 和部分安卓 WebView 中 hover 不触发，且无法控制样式、延迟、位置。此时必须放弃 title，改用 layer.tips()，但要注意表格复用机制带来的事件残留问题。
- 只在
done回调中，对当前页已渲染的th绑定mouseenter，并限定作用域：layui.$('table[lay-id="myTable"] thead th').each(...) - 用
layer.tips(text, this, { time: 0 })，并在mouseleave里手动layer.close(tipsIndex) - 避免在
templet里直接写onmouseenter—— 表格翻页或重载时会重复绑定，导致多个 tips 叠加 - 如果表头文字极长（如含 URL），建议优先砍掉非关键信息，而不是强撑气泡 —— 气泡本身也受限于屏幕宽度，过长反而不可读
最容易被忽略的一点：表头截断依赖 minWidth，但这个值一旦设小（比如 60），中文可能被截成单字多行，英文/数字串则直接溢出。建议按业务语义设值，比如「ID」列用 100，「备注」列用 180，并始终在 Chrome DevTools 里检查 th 的 computed width 和 overflow 是否为 hidden。
