直接修改 .layui-table th 样式即可,需加 .layui-table 前缀并用 !important 覆盖背景色;多表格场景推荐用 skin 隔离样式;导出 excel 表头样式需绕过 layui 手动用 sheetjs 控制。

直接改 .layui-table th 就行,但必须加 .layui-table 前缀
表头字体大小和背景色都由 .layui-table th 控制,不是 thead th 或单独的 th。Layui 的样式权重高,只写 th 或 thead th 会被覆盖。在你自己的 CSS 文件末尾或 <style></style> 块里加:
.layui-table th {
font-size: 14px;
background-color: #4a9ff5 !important;
color: #fff;
}
注意两点:background-color 必须加 !important——因为 Layui 2.7+ 内部用内联 style 设置了背景;font-size 不需要 !important,加了 .layui-table 前缀后权重已足够。
只改某一个表格?用 skin 配合自定义 class
如果你的页面有多个表格,只想改「用户管理表」的表头,全局改会误伤其他表格。这时别硬顶权重,走 Layui 官方支持的隔离路径:
- 初始化时传
skin: 'my-user-table'(任意字符串,不冲突即可) table.render({ elem: '#userTable', skin: 'my-user-table' })- 然后写针对性样式:
.my-user-table .layui-table th { font-size: 16px; background-color: #2c3e50 !important; color: #ecf0f1; }
这个 my-user-table 类会加在 <table> 标签上,不是容器 div,所以选择器必须从它开始链式写,不能漏掉。
<h3>改完没生效?优先检查这三处</h3>
<p>字体/背景没变,大概率不是代码写错,而是被别的规则截胡了:</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
</div>
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>打开开发者工具,选中一个表头 <code>th,看右侧 Styles 面板里 font-size 和 background-color 被哪条规则划掉了(灰色表示被覆盖)
elem.css('background-color', ...) 这类内联样式强行覆盖——它的优先级高于外部 CSS特别注意:如果用了 skin: 'line' 或 skin: 'nob',表头背景默认是透明或白色,此时你的 background-color 才真正起效;而 skin: 'default' 下表头自带蓝灰渐变,会干扰你的颜色设置。
导出 Excel 时表头背景色怎么同步?
table.exportFile() 完全不支持表头样式,它底层调 SheetJS 但只传字段和数据,不传样式。想让导出的 Excel 表头也有背景色,必须绕过封装手动生成:
- 用
table.config['your-table-id'].cols[0]提取列名数组 - 用
XLSX.utils.aoa_to_sheet([headerRow, ...dataRows])创建 sheet - 遍历第一行单元格(如
sheet['A1']),设s: { fill: { fgColor: { rgb: '5C85FB' } } }(注意:必须大写、6位、无#) - 最后用
saveAs(new Blob([...], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}), 'xxx.xlsx')导出
这个过程完全脱离 Layui API,所有样式控制都在 SheetJS 层。一旦开始改导出样式,就得自己管列宽、字体、对齐——没有“只改背景色”的捷径。










