Layui表格thead表头字体大小怎么修改-Layui教程-PHP中文网

最稳方式是覆盖 .layui-table th 选择器，如 .layui-table th { font-size: 14px;}；若仅局部修改，可用 skin 配置自定义 class 并链式写样式，如 .my-big-header .layui-table th { font-size: 16px;}。

直接改 `.layui-table th` 的 `font-size`

layui 表格的表头文字默认由 css 类 .layui-table th 控制，不是靠内联样式或 js 动态写入，所以最稳的方式就是覆盖这个选择器。别去动 thead 或 colgroup，它们不控制字体大小。

常见错误是只写 th 或 thead th，结果被 Layui 自带样式权重盖掉；或者用 !important 硬顶，但其实没必要——加个 .layui-table 前缀就足够提高优先级了。

在你的 CSS 文件末尾或 <style></style> 块里加：
```
.layui-table th {
  font-size: 14px;
}
```

如果要区分普通列和排序列（带小箭头的），可以单独处理：

.layui-table th .layui-table-sort {
  font-size: 14px;
}
/* 注意：.layui-table-sort 是包裹箭头的 span，文字在它里面 */

避免用像素单位以外的（比如 rem）除非你整站统一缩放，否则容易和 Layui 内部计算错位

通过 `skin` 配置 + 自定义 class 绕过全局污染

如果你只改某一个表格，不想影响其他 layui-table，Layui 的 skin 参数支持传入自定义 class 名，再配合局部样式更安全。

使用场景：后台多个表格，只有用户管理页需要加大表头字号。

初始化表格时加：

table.render({
  elem: '#userTable',
  skin: 'my-big-header' // 会加到 table 标签上
});

然后写针对性样式：

.my-big-header .layui-table th {
  font-size: 16px;
}

注意：这个 class 是加在 <table> 标签上的，不是表格容器，所以选择器必须从 <code>.my-big-header 开始链式写
为什么改了没生效？检查这三处

字体没变，大概率不是代码写错，而是被别的规则截胡了。Layui 本身样式表加载顺序、项目里其他 UI 框架（比如 Element、Ant Design）、甚至浏览器插件都可能干扰。
- 打开开发者工具，选中一个表头 th，看右边 Styles 面板里 font-size 被哪条规则划掉了（灰色表示被覆盖）
- 检查是否引入了多份 Layui CSS（比如 CDN + 本地文件共存），旧版本 CSS 可能还在生效
- 确认没有在 JS 里用 elem.css('font-size', '...') 这类内联样式强行覆盖，内联样式的优先级高于外部 CSS
改字体看着简单，但 Layui 表格的样式结构套得深，th 里还嵌了 div 和 span，有时候你以为改的是文字，其实改的是容器高度——真要调得准，得盯着 computed styles 看真实渲染值。