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