跳转到主内容
极星编程网:以代码为星,赴技术山海!

Layui表格怎么修改表头背景颜色

直接修改CSS覆盖:用#id .layui-table thead th{background:#xxx!important},连hover和固定列样式也要单独写,确保在layui.css后加载且选择器优先级足够。 layui table 表头背景颜色在哪改 直接改 css,layui 的
table
渲染后表头是
里的
,没封装成配置项,靠样式覆盖最稳。 别在
cols
配置里找背景色参数——它压根不支持
style
或
skin
控制单个表头背景,所有“改表头颜色”的配置项都是假的,文档里也没这功能。 常见错误现象:
headers
里加
style: 'background:red'
没反应;用
skin: 'row'
只影响行样式,和表头无关;全局
layui.css
被压缩后找不到对应选择器。 推荐改法:在表格渲染后,用 CSS 选择器精准覆盖,比如
#yourTableId .layui-table thead th
如果用了
skin: 'line'
或
'nob'
,对应选择器要带上 class,例如
.layui-table-line thead th
务必加
!important
,因为 Layui 内联了部分默认 background(尤其是 hover 状态) 怎么避免被 layui 默认样式覆盖 Layui 在
hover
和
active
状态下会动态加内联
style
,光写普通 CSS 不够,得用更具体的选择器+强制声明。 典型场景:鼠标移上去表头变蓝,你设的红色瞬间失效;或者分页后重绘,样式丢了。 用 ID 锚定表格:比如表格容器是
,就写
#userTable .layui-table thead th
连 hover 状态一起覆盖:
#userTable .layui-table thead th:hover { background-color: #1890ff !important; }
如果用了固定列(
fixed: 'left'
),固定列的表头在另一个
里,需额外加选择器:
#userTable .layui-table-fixed-l .layui-table thead th
修改后不生效?检查这三个地方 不是代码写错,大概率是加载时机或作用域问题。 CSS 文件是否在
layui.css
之后引入?顺序反了会被覆盖 样式是否写在