th 标签默认加粗且居中是浏览器内置样式,并非额外实现;不加粗常见原因有三:css 显式设置 font-weight:normal、父级样式覆盖、误用 td 代替 th。

th 标签默认就会让文字加粗且居中,这不是“额外实现”的效果,而是浏览器内置的默认样式。如果你看到没加粗,大概率是被 CSS 覆盖了,或者误用了 td。
为什么 th 有时不加粗?
常见原因就三个:
- 外部或内联 CSS 显式设置了
font-weight: normal或font-weight: 400 - 父级元素(比如
table或tr)设置了通用字体样式,意外覆盖了th - 用了
td而不是th,却以为它该加粗——td默认就是普通粗细、左对齐
怎么确认并恢复 th 的默认加粗?
最直接的办法是用开发者工具(F12)检查该 th 元素,看 font-weight 计算值是不是 700。如果不是,说明有样式干扰。修复方式很简单:
- 加一行重置:在
th上直接写style="font-weight: bold;" - 或统一重置:在
<style></style>里写th { font-weight: bold !important; }(仅调试时用,生产环境慎用!important) - 更稳妥的做法是查清哪条 CSS 规则覆盖了它,然后调整选择器优先级,比如把
table th写得比table td更具体
th 和 td 的样式差异不只是加粗
除了 font-weight,th 默认还带这些行为,容易被忽略:
- 文本水平居中(
text-align: center),td是left - 垂直居中(
vertical-align: middle),和td一致,但常被父级tr的height或line-height搞乱 - 没有默认边框、背景色、padding,看起来“空”,实际需要自己加
border或padding才显形
想微调加粗程度,别只用 bold
font-weight 支持数字值,比 bold 更精细:
-
font-weight: 600—— 比默认700稍轻,适合现代 UI 风格 -
font-weight: 500—— 更克制,避免标题太“冲” - 注意:不是所有字体都支持全部字重,比如系统默认的
Times New Roman就只有400和700两级,设600会退回到400
th 的语义是表头,它的默认样式是设计好的起点,改之前先确认改动是否必要。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











