Layui 表格表头换行：表头不再被截断的 3 个最小改动
Layui 表格表头换行表头不再被截断的 3 个最小改动【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui页面里列宽给得很死表头文字一长就被默认样式裁成用户名后面一串省略号想在表头里塞下字段名 单位两行字Layui 表格又不认br。这套表格表头换行 CSS 方案只用几行覆盖样式就能解决。核心思路问题出在哪一行默认样式Layui 表格table 组件的表头单元格被默认样式锁死了height: 38px、white-space: nowrap、overflow: hidden加text-overflow: ellipsis见src/css/modules/table.css里的.lay-table-cell。所以思路就一条在自定义 class 上把这四样覆盖掉让单元格按行数自己撑开不用动任何 JS。最小实现复制即用1. 基础结构挂一个可定位的容器 class先渲染一个普通表格id换成你自己的容器 iddiv classlay-table-demo header-wrap iddemoTable/divlayui.table.render({ elem: #demoTable, id: demoTable, url: /api/list, // 换成你的数据接口 cols: [[ { field: id, title: ID, width: 80 }, { field: name, title: 用户名, width: 120 }, { field: remark, title: 备注信息, width: 300 } ]] });header-wrap是给下一段样式用的钩子名字可换。2. 关键样式覆盖锁死的四个值/* 表头单元格放开行高允许换行 */ .header-wrap .lay-table-header .lay-table-cell { height: auto; /* 去掉 38px 固定高度 */ line-height: 1.5; /* 换成合适的行高 */ white-space: normal; /* 允许折行 */ }只写white-space: normal是没用的必须连同height、line-height一起放开这是换行生效的前提。3. 套用生效把 class 挂到table.render的elem容器上即可选择器前缀记得同步改。数据行仍是原来的 38px 行高只有表头变高视觉上是表头多行、内容单行。容易踩的坑⚠️只改 white-space 不生效现象是文字依旧单行截断。原因在height: 38px把行数限死了怎么办按上面样式把height: auto、line-height一起放开。⚠️左侧/右侧固定列会错位现象是固定列表头与主表头高度不一致、对不上。固定列内部还有一份.lay-table-header怎么办选择器加上.header-wrap .lay-table-fixed .lay-table-header .lay-table-cell。⚠️外层容器有固定高度表头变高后滚动区会被压缩页面变矮。怎么办给容器高度或内边距预留表头增量或改min-height。⚠️列宽没给够文字折成三四行表头被撑得过高。怎么办先按换行后的最长标题定width再回头核对整体表头高度。进阶多级表头与动态高度多级表头怎么换行cols传二维数组即可父列标题写在父级title里第二层写子列cols: [[ { title: 基本信息, /* 父列标题 */ colspan: 2, children: [ { field: name, title: 用户名 }, { field: age, title: 年龄 } ] }, { field: remark, title: 备注 } ]]上面的 CSS 对每一层表头都生效不用再加样式。动态高度如果标题长短完全不可控渲染完成后读最大scrollHeight回写var cells document.querySelectorAll(.header-wrap .lay-table-header .lay-table-cell); var max Math.max.apply(null, Array.from(cells).map(c c.scrollHeight)); document.querySelectorAll(.header-wrap .lay-table-header).forEach(h { h.style.height (max 12) px; });遍历所有.lay-table-header是为了让固定列同步别只改主表头。收尾把这套样式贴到任意一个有长表头的页面列宽调到位表头就不会再被截断。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考