Layui表格怎么在渲染时去掉边框线-Layui教程-PHP中文网

Layui表格去边框需用CSS覆盖，而非配置项；关键样式为.layui-table,.layui-table th,.layui-table td,.layui-table tbody tr{border:none!important}，并清除伪元素::before/::after，且在done回调中重置样式确保生效。

layui table 渲染后怎么隐藏所有边框线

直接改 css，别碰 layui.table.render() 的配置项——它压根不提供“去边框”参数。边框是渲染后由 css 控制的，改样式最稳。

常见错误是试图在 cols 里加 style: 'border: none'，或者幻想用 skin: 'noborder'（Layui 官方没这个 skin 值，写了也无效）。

真正生效的是渲染后生成的 .layui-table 元素及其子元素的 border 样式
必须覆盖掉表格、th、td、tbody tr 等多层 border，漏一层就还会看到线
建议用 !important，因为 Layui 内联样式和高优先级选择器容易覆盖自定义规则

.layui-table,
.layui-table th,
.layui-table td,
.layui-table tbody tr {
  border: none !important;
}
.layui-table th,
.layui-table td {
  border-bottom: none !important;
}

为什么加了 CSS 还有残留细线

不是没生效，是没打中目标——Layui 表格默认用了伪元素模拟分隔线，比如 .layui-table-cell::after 画竖线，.layui-table-body::before 可能加横线。

检查浏览器开发者工具，看残留线是否来自 ::before 或 ::after

加上这两条就能干掉大部分“幽灵线”：

.layui-table-cell::after,
.layui-table-body::before {
  display: none !important;
}

如果用了固定列（fixed: 'left'），还要单独处理 .layui-table-fixed-l .layui-table-body 里的边框

去掉边框后行高/对齐变奇怪怎么办

边框消失后，单元格内边距（padding）和文字垂直居中可能显得突兀，尤其配合 cellMinWidth 或小字号时。

手动调一下 td 和 th 的 padding，比如设成 12px 16px
确保 .layui-table tbody tr 没有意外的 height 或 line-height 干扰
如果用了 even: true（隔行变色），背景色没了边框衬托会更“糊”，可微调 background-color 透明度或加一点 border-bottom: 1px solid #f0f0f0 替代感

用 JS 动态渲染后边框又回来了

说明你的 CSS 是在 render 前加载的，但 Layui 插入 DOM 后可能又注入了带样式的 <style></style> 标签，把你的规则顶掉了。

把去边框 CSS 放到最底部，或用 setTimeout 延迟 10ms 后重置一次关键样式

更可靠的做法：在 done 回调里补一刀：

done: function(res, curr, count){
  $('.layui-table').css('border', 'none');
  $('.layui-table th, .layui-table td').css({'border': 'none', 'border-bottom': 'none'});
}