直接修改 .layui-laypage 容器的 border 样式即可,因其边框由 CSS 控制,与 page 配置项无关;需用 !important 覆盖 Layui 默认 border,且必须完整声明 border 属性(如 border: 2px solid #007bff),仅设 border-color 无效。

直接改 .layui-laypage 容器的 border 就行,别碰 page 配置项
分页控件的边框是纯 CSS 控制的,和 table.render() 或 laypage.render() 的 JS 配置完全无关。你往 page 里加 theme、prev、layout 这些字段,对边框粗细、颜色、圆角没有任何影响。
真正起作用的是 Layui 渲染出的 DOM 结构外层容器:<div class="layui-laypage">。它就是整个分页栏的“皮肤盒子”,所有样式锚点都从这里开始。
-
.layui-laypage:控制整体容器边框、背景、内边距 -
.layui-laypage a和.layui-laypage span:控制按钮/数字区域的边框(注意:当前页是span,其他是a) - 必须加
!important——Layui 内部用行内 style 设了默认border: 0或border: 1px solid #e6e6e6,不加会失效
.layui-laypage 加边框时,为什么只设 border-color 没反应
Layui 默认给 .layui-laypage 设了完整的 border: 1px solid #e6e6e6(2.8+ 版本),不是只设 color。所以如果你只写:
.layui-laypage { border-color: #007bff !important; }
它不会变色——因为 width 和 style(solid/dashed)没覆盖,浏览器仍按默认值渲染。
正确写法只有两种:
- 完整重写:
.layui-laypage { border: 2px solid #007bff !important; } - 或只改某一边:
.layui-laypage { borderBottom: 2px solid #007bff !important; }
别用 border-width 单独设,CSS 对象里不识别 shorthand 的子属性。
表格内分页栏边框加不上?检查是否被 .layui-table-page 包裹
当分页嵌在 layui-table 里时,Layui 会把 .layui-laypage 套进一个 <div class="layui-table-page"> 容器中。这个父容器默认有 padding: 10px 15px 和 border-top: 1px solid #f2f2f2,容易造成「明明加了边框却看不见」的错觉。
解决方案是连带覆盖外层容器:
.layui-table-page { border: none !important; }
.layui-table-page .layui-laypage { border: 1px solid #2080f0 !important; padding: 4px 8px !important; }
注意:.layui-table-page 的 border-top 是独立存在的,不改它,你的 .layui-laypage 边框可能被遮半截。
想让分页按钮也有边框,但 .layui-laypage a 不生效?优先级不够
按钮本身还带一层内联 style="margin: 0 5px;",虽然不影响边框,但说明 Layui 对按钮样式做了强控制。如果 .layui-laypage a 没生效,大概率是 CSS 加载顺序或选择器权重问题。
稳妥做法是提升权重:
- 用更具体的选择器:
.layui-laypage > a, .layui-laypage > span - 或加
body前缀:body .layui-laypage a - 确保你的 CSS 文件在
layui.all.js(或layui.css)之后加载,否则会被覆盖
另外,当前页按钮是 span 不是 a,漏掉它就会出现「其他页码有边框、当前页没边框」的割裂感。


















