必须覆盖四类选择器并清除伪元素和容器边框才能真正扁平化:.layui-table td/th、固定列单元格、.layui-table-col-set、.layui-table自身;因Layui硬写内联样式且skin配置无效,需用!important强制覆盖。

直接去掉 .layui-table 的 border 和所有单元格的右/下边框,再清掉伪元素和拖拽分隔线,才能真正扁平化——Layui 没提供开关,全靠 CSS 覆盖。
为什么 skin: 'nob' 不管用
它只关掉表头和表格自身的部分边框,但每个 <td> 和 <th> 仍被 Layui 渲染时硬加上 style="border-right: 1px solid #e6e6e6 !important";skin: 'nob' 对这种内联样式完全无效。
-
skin: 'line'只保留横线,竖线还在 -
skin: 'row'是列边框风格,反而加重竖线 - 哪怕设了
skin: 'nob',固定列(fixed: "left")区域的竖线依然顽固存在
必须覆盖的四类 CSS 选择器
漏掉任意一类,都会在不同场景下“闪现”或残留竖线:
.layui-table td, .layui-table th { border-right: none !important; border-bottom: none !important; }.layui-table-fixed-l .layui-table td, .layui-table-fixed-l .layui-table th, .layui-table-fixed-r .layui-table td, .layui-table-fixed-r .layui-table th { border-right: none !important; border-bottom: none !important; }-
.layui-table-col-set { display: none; }(否则表头最右侧拖拽分隔线会留一道细线) -
.layui-table { border: none; }(清除表格容器自身默认的border-right和border-bottom)
注意:!important 不是可选,是必须——用来对抗 Layui 渲染时写死的内联样式权重。
别忘了伪元素和最后一行底边框
即使上面都清了,.layui-table-cell::after 有时会悄悄画一条竖线;而最后一行数据下方,还可能因 .layui-table-body 的滚动容器溢出导致视觉残留底边。
.layui-table-cell::after { display: none !important; }.layui-table-body { border-bottom: none; }- 如果用了
even: true,记得加.layui-table tr:nth-child(even) { background-color: transparent !important; }避免隔行色干扰扁平感
CSS 加载时机和主题干扰
常见“先闪一下竖线,再消失”,基本都是 CSS 生效晚于 table.render() 渲染完成。
- 把扁平化 CSS 放在
<head>最底部,或确保它比 Layui 自带的<style>标签后加载 - 禁用
skin配置项:一旦设了skin: 'line'或'nob',Layui 会在 DOM 上打上对应 class 并主动加边框逻辑,跟你的 CSS 冲突 - 检查是否引入了第三方主题 CSS,它可能重置了
.layui-table的border-collapse或注入额外样式
真正的扁平化不是“看起来没边框”,而是从 DOM 结构、内联样式、伪元素、容器边界四个层面全部归零——少一步,就可能在固定列滚动、表头悬停、或窗口 resize 后露馅。


















