layui table边框由CSS控制,无JS开关参数;需手动覆盖.layui-table及th/td的border样式,推荐用自定义class加CSS方式隐藏,如.table-no-border .layui-table{border:none}。
layui table 的边框由 CSS 控制,不是通过 JS 配置项开关
layui 的 table.render() 不提供类似 border: false 这样的原生参数来控制边框显隐。所有边框样式都来自内置 css(主要是 .layui-table 类的 border-collapse 和单元格 border),必须手动覆盖。
常见错误是反复翻文档找 border、showBorder 等不存在的配置项,浪费时间又无效。
- 边框显示与否,完全取决于你是否重写了
.layui-table及其子元素的border样式 - layui 2.8+ 默认启用
border-collapse: collapse,所以“隐藏边框”本质是把所有border设为none或透明 - 不要试图用
done回调里操作 DOM 加 class——太晚,且易被 layui 内部重绘覆盖
隐藏表格边框的最简写法(推荐 inline style)
在渲染前,给容器加一个自定义 class,再用 CSS 覆盖。这是稳定、低侵入、不依赖 layui 版本的方式。
例如容器是:
<div id="demo" class="table-no-border"></div>
对应 CSS:
.table-no-border .layui-table { border: none; }<br>.table-no-border .layui-table th,<br>.table-no-border .layui-table td { border: none; }
- 必须同时清除
table和th/td的border,否则只清 table 会留下“内边框” - 避免用
!important,layui 2.8 的 CSS 权重已较高;若冲突,可加一层父级 class 提高优先级 - 不用改 layui 源码或引入额外 JS,也不影响其他表格
想只隐藏外边框、保留内部线条?改 border-collapse 就行
默认 border-collapse: collapse 会让内外边框合并,看起来像“全有”或“全无”。要保留内部格线但去掉外框,关键是拆开它。
做法:
.table-inner-only .layui-table {<br> border: none;<br> border-collapse: separate;<br>}<br>.table-inner-only .layui-table th,<br>.table-inner-only .layui-table td {<br> border: 1px solid #e6e6e6;<br>}
-
border-collapse: separate是关键,它让每个单元格的 border 独立渲染 - 此时
th/td的border控制内部线,table的border控制外框——设为none即隐藏外框 - 注意:
separate下单元格间会有默认间距(border-spacing),需设为0否则出现白缝
用 skin 参数切换主题时,边框行为会变
layui 的 skin 配置(如 "line"、"row")本质就是预设 CSS class,它们自带不同的边框策略:
-
skin: "line"→ 只显示横向分割线(th/td上边框 + 下边框),外框仍存在 -
skin: "row"→ 只对奇偶行加背景色,边框全靠你自己的 CSS 控制 -
skin: "nob"(注意拼写是nob不是no-border)→ 官方提供的“无边框”皮肤,但仅移除部分 border,仍需补一刀.layui-table { border: none; }才彻底干净
别迷信 skin 能一步到位,它只是快捷入口,最终还得看 CSS 是否真正生效。
最麻烦的地方往往不是写法,而是浏览器开发者工具里看到的 computed style 显示有 border,但实际没生效——八成是 CSS 选择器权重不够,或者被 layui 后续 render() 动态插入的 style 覆盖了。这时候老老实实用 body .your-class .layui-table 这种带 body 前缀的方式提权,比猜配置快得多。










