必须用CSS覆盖三类选择器:.layui-table td/th、固定列对应单元格、.layui-table-col-set,并加!important;同时清除.layui-table自身border-right及.layui-table-cell::after伪元素,确保无残留竖线。
直接写 css 覆盖,别指望 skin 或 cols 配置项能关掉竖线——layui 压根没提供这个开关。
为什么 border-collapse: collapse 没用
Layui 表格不是标准语义化 <table>,它把每列单元格塞进多层 <div> 容器(比如 .layui-table-fixed-l、.layui-table-body),border-collapse 对这种结构完全失效。你查 DOM 会发现:每个 <td> 和 <th> 都被硬加上了 style="border-right: 1px solid #e6e6e6 !important" —— 这才是竖线的真正来源。
- 只改
.layui-table的 border,漏掉单元格层级,竖线照出 - 只清
td不清th,表头和内容列右边界对不齐 - 用了固定列(
fixed: "left")却没处理.layui-table-fixed-l .layui-table td,滚动时竖线“闪现”
必须覆盖的三类选择器(含 fixed 列)
竖线来自三个地方:普通列单元格、固定列单元格、以及表头右侧那个拖拽分隔线(.layui-table-col-set)。缺一不可:
.layui-table td, .layui-table th { border-right: 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; }-
.layui-table-col-set { display: none; }(否则表头最右可能残留一道细线)
注意:!important 不是偷懒,是匹配 Layui 渲染时写死的内联样式权重;.layui-table-col-set 容易被忽略,但它在皮肤为 line 或自定义主题下更顽固。
最后一列右边框残留怎么处理
即使所有单元格的 border-right 都清了,.layui-table 自身默认有 border-right: 1px solid #e6e6e6,导致最右边缘还有一道细线。顺手补上:
.layui-table { border-right: none; }- 如果用了
skin: 'line'或'nob',这些皮肤会主动加边框,务必确认初始化时没误配——真要扁平化,就别设skin,纯靠 CSS 控制
另外,伪元素也藏竖线:.layui-table-cell::after 有时会画一条竖线,加一句 .layui-table-cell::after { display: none !important; } 更保险。
CSS 加载时机和主题干扰
常见“闪现竖线”问题,往往是因为 CSS 在 table.render() 之后才生效。解决方案有两个:
- 把去竖线的 CSS 放在
<head>最底部,或放在<style>标签里且确保早于 Layui 的<style>注入 - 在
done回调里手动重置一次关键样式:elem.next().find('td, th').css('border-right', 'none')(仅作兜底,不推荐主用) - 如果你用了自定义主题(比如 dark 主题),检查是否主题 CSS 重写了
border-right颜色——得在你自己的规则后追加覆盖
导出 Excel 或打印预览时,这些 CSS 全部失效,竖线必然重现,这不是 bug,是浏览器原生行为,提前心里有数就行。


















