layui分页怎么去掉边框线

轻磊吖_3539

轻磊吖_3539

2026-08-15

246人浏览

原创

layui分页按钮边框由.layui-laypage a控制,需覆盖该选择器及.layui-laypage-curr、.layui-laypage em等类的border和background,并加!important;分页栏整体外边框需同时处理.layui-table-page、.layui-table-box及其伪元素,reload时应使用全局css确保生效。

layui分页怎么去掉边框线

layui分页按钮的边框由 .layui-laypage a 控制

分页组件的边框不是表格边框,而是独立的按钮样式。Layui 默认给所有分页按钮(包括「上一页」「下一页」「数字页码」)加了 border,来源是 .layui-laypage a 这个选择器。它和表格的 .layui-table 无关,改错地方就白忙活。

常见错误是去动 table.render() 的配置项,或者试图用 skin: 'noborder'——这个参数根本不存在于分页组件中。

  • 真正要覆盖的是:.layui-laypage a、.layui-laypage .layui-laypage-curr(当前页)、.layui-laypage em(总页数等文字容器)
  • 必须重置 border 和 background,否则只清边框会留下背景色块,显得更突兀
  • 如果用了 theme 参数(比如 theme: '#1890ff'),Layui 会自动生成内联样式,优先级高,得加 !important

示例 CSS:

.layui-laypage a {
  border: none !important;
  background: transparent !important;
}
.layui-laypage .layui-laypage-curr {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.layui-laypage em {
  border: none !important;
}

去掉分页栏整体外边框和底部分割线

分页栏容器本身(.layui-table-page)可能带有一圈外边框或底部横线,尤其在表格启用分页后,Layui 有时会通过伪元素或父容器加 border-bottom。这不是按钮边框,而是布局层的装饰线。

这类线容易被忽略,因为开发者工具里不一定直接标出来源,常表现为分页区域上方或下方一条细线。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 检查 .layui-table-page 是否有 border 或 border-bottom
  • 检查 .layui-table-box 是否设置了 border-bottom(表格容器常带此样式)
  • 某些主题皮肤(如 skin: 'row')会在分页区顶部加 ::before 横线,需额外清除:.layui-table-page::before { display: none !important; }

稳妥写法:

.layui-table-page,
.layui-table-box {
  border-bottom: none !important;
}
.layui-table-page::before {
  display: none !important;
}

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

不是 CSS 没生效,而是没打中真实渲染节点。Layui 分页 DOM 结构较深,且不同版本插入时机不同,容易漏掉以下几处:

  • .layui-laypage-skip input:跳转输入框自带 border,若 layout 里保留了 'skip',就得单独处理
  • .layui-laypage > .layui-laypage-count:总条数文案容器,部分版本会加 border-left
  • 固定列表格(fixed: 'left')的分页栏可能被包裹在 .layui-table-fixed-r 里,需额外作用域
  • layer 弹窗内渲染的分页,父级 .layui-layer-content 可能透出边框,需向上追溯

建议打开浏览器开发者工具,鼠标悬停在细线上,看 computed styles 里 border 来自哪个规则,再针对性覆盖。

reload 后边框又回来了怎么办

每次 table.reload() 都会重新生成整个分页 DOM,包括内联样式。你之前写的 CSS 如果依赖全局 class 或加载顺序,很可能被新注入的样式覆盖。

  • 别把去边框 CSS 写在 done 回调里——它只在首次渲染触发,reload 不走 done(除非显式传 done)
  • 全局 CSS 是最稳的,但必须确保它在 Layui 自带 CSS 之后加载(比如放在 最底部,或用 @import 延后)
  • 如果项目用构建工具,确保你的样式文件打包顺序在 layui.css 之后
  • 极端情况可加延迟重置:setTimeout(() => $('.layui-laypage a').css('border', 'none'), 10),但属兜底手段

真正麻烦的不是第一次去边框,而是 reload、tab 切换、弹窗二次打开这些场景下,DOM 生命周期不一致导致样式失效——盯住节点生成时机,比堆 CSS 更重要。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

1740

10

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.01

2366

5

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

0

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

0

15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

200

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

120

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

100

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

60

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

2026.09.22

80

13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.6万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.8万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习