默认加粗居中但常因CSS层叠覆盖而失效，需用开发者工具排查computed styles，避免滥用!important，应严格按语义使用并兼顾可访问性。
为什么 <th> 默认就加粗居中，但有时不生效<p><code><th> 是语义化表头单元格标签，浏览器默认样式本就包含 <code>font-weight: bold 和 text-align: center。但实际开发中常发现文字没加粗、也没居中——根本原因通常是 CSS 层叠覆盖了默认样式，比如全局重置（如 normalize.css 或自定义 * { font-weight: normal; text-align: left; }）或表格祖先元素设置了 text-align。
解决思路不是“强行加样式”，而是先确认是否被意外覆盖：
- 用浏览器开发者工具检查
<th> 元素的 computed styles，看 <code>font-weight是否为bold、text-align是否为center - 检查是否有更高级别的选择器（如
table th、.my-table th、甚至td, th）显式设了normal或left - 注意：IE8 及更早版本对
<th> 的默认居中支持不稳定，但现代项目基本无需考虑<h3>手动补全样式时该写哪些 CSS 规则</h3> <p>如果确认需要显式声明，优先用最小作用域、最简规则，避免过度指定。不要写 <code>th { font-weight: bold !important; text-align: center !important; }——!important会破坏后续维护性。- 只针对当前表格：写
.data-table th { font-weight: bold; text-align: center; } - 若需兼容旧版 Safari（
text-align: -webkit-center已废弃），现代写法完全不用加前缀 - 垂直居中？
<th> 默认是 <code>vertical-align: middle，但若父<tr> 或 <code><table> 设了 <code>top，就会失效；此时应改th { vertical-align: middle; } - 避免用
display: flex强行居中——会破坏表格语义和可访问性（如屏幕阅读器可能无法正确识别表头关联） - 例如：
<th scope="col">姓名</th>表明该列数据都归属“姓名”这一列头；而<th scope="row">2024年</th>表明该行数据时间维度是“2024年” - 滥用
<th> 后，CSS 选择器如 <code>th:first-child可能匹配到非预期位置，导致样式批量错位响应式表格里
<th> 的文字截断与换行问题<p>小屏幕下，<code><th> 文字过长常被截断或撑开表格。这时不能靠 <code>white-space: nowrap硬扛，而要结合语义调整。- 优先用
th { white-space: normal; word-break: break-word; }，让长单词也能折行 - 若内容本质是缩写（如 “Avg. Response Time”），可用
<abbr title="Average Response Time">Avg.</abbr>配合abbr { text-decoration: none; cursor: help; }，既保持可读又节省空间 - 极端窄屏场景（如手机竖屏），考虑用 CSS @media 隐藏次要
<th> 并用 <code>data-label属性把表头信息移到<td> 内部显示，而不是强行让 <code><th> 挤在一起<p>真正难处理的不是加粗居中本身，而是把 <code><th> 当作纯样式标签来用——它背后绑定着结构、语义、可访问性三层约束，绕开其中任何一层，后面都会冒出更隐蔽的问题。</th>
- 优先用
<th> 和 <code><td> 混用导致样式错乱<p>常见错误：把所有单元格都写成 <code><th>（比如为了“看起来像表头”），或在非首行/首列位置误用 <code><th>。这不仅让样式不可控，还会破坏表格结构语义，影响无障碍访问和 SEO。<ul><li><code><th> 应仅用于真正承担表头功能的单元格：行标题（<code>scope="row"）、列标题（scope="col"）、或带rowspan/colspan的复合表头 - 只针对当前表格：写
