最稳方式是给表格加自定义class（如my-table），再写.my-table thead th {background-color:#4a9ff5!important;color:#fff;}，并确保CSS提前加载；skin参数会影响表头颜色但不可控；移动端需额外适配.layui-table-box .layui-table thead th。

直接改 CSS 类就行，别碰 layui.css 源文件

layui 表格表头默认用 .layui-table th 控制，但它的背景色是通过内联 style 或高优先级 class（比如 .layui-table-header）叠加出来的，硬改全局样式容易被覆盖。最稳的方式是加自定义 class 到表格容器，再写针对性 css。

• 给 table 标签加个 class，比如 class="my-table"
• 在页面底部或独立 CSS 里写：

  .my-table thead th {
    background-color: #4a9ff5 !important;
    color: #fff;
  }

• 务必加 !important——因为 layui 内部用了行内 style 设置背景，不加可能无效
• 避免直接改 layui.css，否则升级 layui 时会被覆盖

用 skin 参数切换内置主题时，表头颜色会变吗

会，但只影响部分皮肤，且不可控。layui 的 skin 参数（如 "line"、"row"、"nob"）主要调整边框和 hover 效果，"default"（默认）才有蓝灰渐变表头；其他 skin 下表头通常变成纯白或浅灰，背景色逻辑被重置。

• skin: "default" → 表头有默认蓝灰背景，但无法微调色值
• skin: "line" → 表头背景变透明/白色，此时你自定义的 background-color 才真正生效
• 如果用了 skin 又想统一配色，建议固定用 "line" 或 "nob"，再全量控制 CSS

动态渲染表格后，新表头没应用颜色？

常见于用 table.render() 异步加载数据后，表头 DOM 是 JS 生成的，但你的 CSS 已加载完毕——这时候不是样式失效，而是选择器没匹配上新节点。

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

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

下载

• 确认你的 CSS 在 table.render() 调用前已载入（推荐放 <head> 或页面顶部）
• 不要用 #id 或过于具体的父级路径（如 .layui-table-view .layui-table thead th），layui 渲染时可能插入额外 wrapper
• 更稳妥的选择器是：

  table.my-table thead th

  或直接用属性选择器：

  table[lay-id="yourTableId"] thead th

• 如果仍不行，在 done 回调里手动加 class：

  done: function(res, curr, count){
    $('.layui-table[lay-id="yourTableId"] thead th').css('background-color', '#4a9ff5');
  }

  （不推荐，仅临时救急）

移动端下表头颜色显示异常？

layui 表格在小屏下会启用响应式横向滚动，此时 thead 被抽离成固定定位层，DOM 结构变化导致原有 CSS 选择器失效。

• 检查 Chrome DevTools 的 Elements 面板，看小屏下 thead 是否被移到了 .layui-table-box 外部
• 适配写法要覆盖两处：

  .my-table thead th,
  .layui-table-box .layui-table thead th {
    background-color: #4a9ff5 !important;
  }

• 注意：移动端 fixed 表头默认带阴影，若要隐藏，额外加 box-shadow: none

改表头颜色这事本身简单，难的是它总在不同场景下“悄悄换马甲”——渲染时机、skin 模式、响应式结构、CSS 优先级，每个都可能让颜色突然消失。盯住 DOM 实际结构，比背文档管用。