layui table单元格内容过长怎么设置换行显示？-Layui教程-PHP中文网

必须在table.render()的done回调中用!important覆盖layui内联样式并调用table.resize()，否则white-space:normal无效且fixed列错位。

layui table单元格内容过长怎么设置换行显示？

直接给 td 和 th 加 white-space: normal 不生效，是因为 layui 渲染后会动态写入内联 height 和 white-space: nowrap，必须用 !important 覆盖，并在正确时机注入样式。

常见原因不是 CSS 没写对，而是被 layui 后续 JS 插入的内联样式覆盖。比如浏览器开发者工具里能看到 <td style="height: 42px; white-space: nowrap;"> —— 这个 <code>style 是渲染时自动加的，优先级高于普通 CSS 规则。

必须在 table.render() 的 done 回调里操作，确保 DOM 已生成
要用 !important 强制覆盖：比如 white-space: normal !important、height: auto !important
别只改 .layui-table td，还得同步处理 .layui-table th 和带 lay-unselect 类的单元格（如 checkbox 列）
如果用了 skin: 'row' 等自定义皮肤，CSS 选择器得带上对应属性：.layui-table[lay-skin="row"] td

适用于「描述」「备注」「日志」这类明确需要换行的字段，避免全局样式污染表头或操作列。

一款深蓝色网站后台管理系统layui框架模板

下载

在列配置中用 templet 返回带样式的 <div>：<code>templet: '<div style="white-space: normal; word-break: break-word; padding: 8px 10px;">{{d.content}}</div>'
务必加 padding，否则文字贴边难读；原生单元格有内边距，自定义容器要手动补上
如果内容含换行符 \n，不能只靠 CSS：要在 templet 函数里显式替换，return d.content.replace(/\n/g, '<br>');
空值必须判空，否则模板报错：templet: function(d) { return d.content ? '<div class="cell-wrap">' + d.content.replace(/\n/g, '<br>') + '</div>' : ''; }

内容换行了，但 tr 还卡在默认 height: 45px，导致文字被压扁、右侧固定列和表头不同步——这不是样式漏了，是 layui 布局引擎没重算高度。

必须在 done 回调里调 table.resize('your-table-id')，否则 fixed 列、表头、tbody 行高三者必然失同步
别用 $('tr').css('height', 'auto') 这类 jQuery 强制设高，会破坏 layui 内部布局逻辑
如果表格启用了 totalRow 或 toolbar，它们的 tr 也要单独处理：$('.layui-table .layui-table-total tr, .layui-table .layui-table-tool tr').css('height', 'auto')
移动端尤其要注意：小屏下换行易撑宽列，建议给表格容器加 overflow-x: auto，并为换行列设 minWidth: 120 起步