layui表头文字不加粗的最稳妥方案是优先使用css类覆盖或cols.style配置:全局修改在自定义css末尾加.layui-table th {font-weight: 700 !important;},局部列则通过cols中style字段设置内联样式,兼顾精准性与可维护性。

layui table 表头文字不加粗?直接改 CSS 类最稳妥
layui 的 table.render() 默认用的是内置样式,.layui-table th 本身有 font-weight: bold,但如果你发现没生效,大概率是项目里其他 CSS 把它覆盖了。别碰 layui 源码或强行加 !important,优先走官方支持的 skin 或自定义 cols 配置。
- 检查浏览器开发者工具,看
.layui-table th是否被更高权重的选择器(比如#app .layui-table th)重置了font-weight - 如果只是局部表格要改,用
skin: 'line'或'row'会自动启用更轻量的默认样式,此时再微调更安全 - 全局统一改?在你自己的 CSS 文件末尾加:
.layui-table th { font-weight: 700 !important; font-family: "Helvetica Neue", Arial, sans-serif; }——注意只加!important这一次,后续靠选择器权重控制
用 cols 配置项动态控制表头样式(推荐给特定列)
如果你只想让「操作」列或「状态」列加粗、换字体,cols 里的 style 字段比全局 CSS 更精准,也避免影响其他表格。
-
style是字符串,写内联样式,比如:style: 'font-weight: 800; font-family: "Microsoft YaHei";' - 只对当前列的
<th> 和 <code><td> 生效,不影响其他列 <li>注意引号嵌套:外层用单引号,里面字体名带空格必须用双引号,否则解析失败</li> <li>示例:<pre class="brush:php;toolbar:false;">cols: [[{field: 'title', title: '标题', style: 'font-weight: 700; font-family: "PingFang SC";'}]]</pre> </li> <h3>修改 layui 源码 css 文件?风险高,仅限离线部署且无升级需求</h3> <p>有人直接改 <code>layui/css/layui.css里的.layui-table th,短期有效,但下次升级 layui 就丢了。除非你打包时把 layui 当作私有依赖、完全不更新,否则不建议。- 查找位置:在
layui.css中搜.layui-table th,通常在第 2000 行附近 - 改完记得清浏览器缓存,否则可能还在读旧 CSS
- CI/CD 流程中若自动拉取最新 layui,这个改动会被覆盖,上线后表头突然变细就很难排查
字体 fallback 不写全?中文渲染会出问题
只写
font-family: "SimSun"看似简单,但 macOS、Linux、新版本 Windows 都可能找不到,最后回退到默认等宽字体,字形难看还可能撑破表头。- 必须带英文 fallback,例如:
"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif - 避免使用已淘汰字体如
"Arial Unicode MS",现代浏览器基本不预装 - 移动端尤其要注意:iOS Safari 对自定义字体路径敏感,本地字体名大小写必须和系统一致(比如
"SF Pro Display"不能写成"sf pro display")
cols.style。真正容易被忽略的是字体 fallback 链和缓存问题——改完刷新页面没变化,八成是 CSS 没生效或者浏览器在用旧文件。 - 查找位置:在










