需通过CSS覆盖Layui表格竖线:.layui-table td,.layui-table th{border-right:none!important;}.layui-table-col-set{display:none;}.layui-table{border-right:none;}
直接改 css,别碰 lay-filter 或 cols 配置——那些控制的是列定义和渲染逻辑,不是边框。layui 的表格竖线是通过单元格的 border-right 实现的,且默认带内联样式,光靠初始化参数关不掉。
Layui 渲染后会为 td 和 th 单独加 border-right,而且优先级高。只写 table { border-collapse: collapse; } 没用,得精准打击:
layui-table td, .layui-table th:干掉单元格右边界.layui-table-col-set:这个类在表头右侧可能残留一个“列拖拽分隔线”,也得设 display: none
示例:
.layui-table td,.layui-table th { border-right: none !important;}.layui-table-col-set { display: none;}
!important?因为 Layui 在渲染时会把 border-right 写进元素的 style 属性里,属于内联样式,普通 CSS 选择器权重不够。不用 !important 就会被覆盖,竖线照常出现。这不是偷懒,是匹配 Layui 的实际渲染机制。
即使所有 td/th 的 border-right 都清了,有时最右一列仍显细线——那是 .layui-table 自身的 border-right。顺手加上:
.layui-table { border-right: none;}
另外,如果用了 skin: 'line' 或 'nob',这些皮肤本身会加边框,务必确认没在 init 里误配。真要彻底干净,就别用皮肤,纯靠 CSS 控制。
真正麻烦的不是写几行 CSS,而是得记住:Layui 的表格样式是“渲染时硬塞 + 后期补丁”,所以删竖线这事,永远得从 DOM 结构和最终生成的 class 双向核对,不能只信文档里的配置项。