Layui 表格表頭換行如何一步到位表頭多行顯示完整指南【免費(fèi)下載鏈接】layui一套遵循瀏覽器原生態(tài)開發(fā)模式的 Web UI 組件庫。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/layuiLayui 的 table 組件默認(rèn)不讓表頭文字換行。標(biāo)題一長就被nowrap頂成一坨要么溢出、要么被省略號截?cái)?。想?shí)現(xiàn) Layui 表格表頭換行其實(shí)只需放開三處限制下面帶你一步步改到位。默認(rèn)為什么不換行兩條 CSS 限制翻一下 表格組件源碼 的表頭模板每個(gè)th里都包著一層.lay-table-cell。在 表格樣式文件 里它被寫死了兩個(gè)限制.lay-table-cell { height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }white-space: nowrap管著不許斷行height: 38px管著只給一行的高度。文字再長也只能擠在一行里多出來的部分被overflow: hidden裁掉。所以表頭多行顯示的前提就是放開這兩條。第一步給表頭留出多行空間先改 HTML給目標(biāo)表格掛一個(gè)自己的類名方便后面精確覆蓋樣式div iddemo classmytable/div初始化照常用table.render列定義里把長的標(biāo)題直接寫全cols: [[ {field: id, title: ID, width: 90}, {field: name, title: 申請人完整姓名及所屬部門信息, width: 200} ]]標(biāo)題越長越容易觸發(fā)換行列寬給足效果才自然。第二步三行 CSS 搞定表頭換行HTML 放好后只需覆蓋.lay-table-cell的三個(gè)屬性.mytable .lay-table-header .lay-table-cell { height: auto; white-space: normal; line-height: 22px; }white-space: normal是關(guān)鍵它讓文字按列寬自動(dòng)折行height: auto去掉固定行高行高交給line-height控制。改完刷新長標(biāo)題就整齊地折成兩行了。避坑清單表頭換行常踩的 5 個(gè)坑只改white-space不改height文字折行了但容器還是 38px第二行直接被裁掉。兩條必須一起改。選擇器寫全局.lay-table-cell是全部單元格共用的類不加自己的父類做限定整張表的數(shù)據(jù)行也會跟著變高。列寬留太少white-space: normal只影響斷行時(shí)機(jī)列太窄時(shí)申請人完整姓名及所屬部門信息會折成三四行反而更丑。固定列不同步表格有fixed列時(shí)Layui 會額外渲染一份固定列表頭樣式寫在同一個(gè).mytable下即可覆蓋到但高度要和主表頭一致否則左右會錯(cuò)位。表頭高度取值兩行標(biāo)題大約需要 66-70px。別為了保險(xiǎn)給 120px留白太大表格顯得很松還會壓掉可視區(qū)的行數(shù)。場景延伸多級表頭怎么改多級表頭的分組行用的是laytable-cell-group類結(jié)構(gòu)上仍落在.lay-table-header里上面那條 CSS 已經(jīng)生效不用額外寫。如果分組行文字居中、想保持垂直居中可以補(bǔ)一條.mytable .lay-table-header .laytable-cell-group { display: flex; align-items: center; }場景延伸動(dòng)態(tài)計(jì)算表頭高度標(biāo)題長度不確定時(shí)寫死高度容易猜不準(zhǔn)。渲染完成后遍歷表頭單元格取最大高度即可const cells document.querySelectorAll(#demo .lay-table-header .lay-table-cell); let h 0; cells.forEach(c (h Math.max(h, c.offsetHeight))); document.querySelector(#demo .lay-table-header).style.height h 4 px;注意要在done回調(diào)里執(zhí)行此時(shí) DOM 已渲染完畢量出來的高度才準(zhǔn)確。到這里layui 表格自定義表頭高度、layui 表頭 white-space 這些需求就都有了著落。去你項(xiàng)目里試試改完記得在窄屏上也看一眼折行效果?！久赓M(fèi)下載鏈接】layui一套遵循瀏覽器原生態(tài)開發(fā)模式的 Web UI 組件庫。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/layui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考