Layui表格隐藏表头的正确方法是用CSS将.layui-table-thead压扁透明无边框,而非清空cols;需处理th隐藏、首行边框/背景及skin主题兼容性,JS动态操作仅作备用。
直接设置 headers 为空数组不起作用
很多人试过把 cols 配置设为空数组或 [],结果表格直接报错或渲染空白——layui 的 table.render() 强制要求 cols 至少有一列定义,否则会抛出 typeerror: cannot read property 'length' of undefined。这不是 bug,是设计约束:没有列定义,连 tbody 都无法生成。
真正可行的路只有一条:保留列结构,但让表头「视觉消失」且不占布局空间。
- 用 CSS 隐藏
.layui-table-thead,但必须同时处理th的 border、padding 和 font-weight,否则可能残留线条或高度 - 不能只靠
display: none,否则部分版本 Layui 会因表头高度为 0 导致 tbody 错位 - 必须配合
height和line-height重置,否则在 IE 或低版本 Chrome 下会出现垂直对齐异常
用 CSS 覆盖 .layui-table-thead 最稳妥
Layui 表格的表头容器固定类名为 .layui-table-thead,它包裹所有 th。只要把它「压扁 + 透明 + 无边框」,就能实现彻底隐藏,且不影响数据行渲染逻辑。
推荐这样写(加到页面 <style> 或全局 CSS 中):
.layui-table-thead {
display: block;
height: 0;
padding: 0;
border: none;
}
.layui-table-thead th {
display: none;
}
.layui-table tr:first-child > td {
border-top: none;
}
-
display: block是关键:避免某些版本里thead被设为table-header-group后影响子元素display: none的继承 - 必须单独处理第一行
td的border-top,否则表头隐藏后,首行数据单元格顶部仍有一像素边框 - 不要用
visibility: hidden,它仍占空间,会导致表格整体上移错位
如果用了 skin: 'line' 或 'row' 主题要额外处理
不同 skin 下,表头样式来源不同:skin: 'line' 会让每行都带底边,skin: 'row' 则给奇偶行加背景色。这些样式会穿透到第一行数据上,造成「表头虽无,但首行看起来像表头」的错觉。
- 对
skin: 'line',需额外清除首行td的border-bottom:.layui-table tbody tr:first-child td { border-bottom: none; } - 对
skin: 'row',需重置首行背景:.layui-table tbody tr:first-child { background-color: transparent !important; } - 若用了自定义
even/odd类,也要同步排除第一行
动态渲染后追加隐藏(适用于异步表格)
如果表格是通过 table.reload() 或接口返回后调用 table.render(),CSS 可能已加载完毕,但 DOM 还没就绪。此时单纯靠样式表可能失效,得等表格真实插入 DOM 后再补一刀。
- 在
done回调里执行:$('.layui-table-thead').hide().parent().css('padding-top', 0); - 更稳的做法是用
setTimeout延迟一帧:setTimeout(() => $('.layui-table-thead').remove(), 16);—— 注意:remove()比hide()更彻底,但会破坏某些依赖 thead 的内部计算(如列宽自适应),慎用 - 优先选 CSS 方案;只有在 iframe 嵌套、Shadow DOM 或主题冲突严重时,才考虑 JS 补删
cols 数组本身——那才是最容易翻车的地方。










