默认加粗居中但常因CSS层叠覆盖而失效，需用开发者工具排查computed styles，避免滥用!important，应严格按语义使用并兼顾可访问性。

为什么 默认就加粗居中，但有时不生效

是语义化表头单元格标签，浏览器默认样式本就包含 font-weight: bold 和 text-align: center。但实际开发中常发现文字没加粗、也没居中——根本原因通常是 CSS 层叠覆盖了默认样式，比如全局重置（如 normalize.css 或自定义 * { font-weight: normal; text-align: left; }）或表格祖先元素设置了 text-align。

解决思路不是“强行加样式”，而是先确认是否被意外覆盖：

• 用浏览器开发者工具检查 元素的 computed styles，看 font-weight 是否为 bold、text-align 是否为 center
• 检查是否有更高级别的选择器（如 table th、.my-table th、甚至 td, th）显式设了 normal 或 left
• 注意：IE8 及更早版本对 的默认居中支持不稳定，但现代项目基本无需考虑

  手动补全样式时该写哪些 CSS 规则

  如果确认需要显式声明，优先用最小作用域、最简规则，避免过度指定。不要写 th { font-weight: bold !important; text-align: center !important; } —— !important 会破坏后续维护性。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 只针对当前表格：写 .data-table th { font-weight: bold; text-align: center; }
  • 若需兼容旧版 Safari（text-align: -webkit-center 已废弃），现代写法完全不用加前缀
  • 垂直居中？ 默认是 vertical-align: middle，但若父 或 设了 top，就会失效；此时应改 th { vertical-align: middle; }
    避免用 display: flex 强行居中——会破坏表格语义和可访问性（如屏幕阅读器可能无法正确识别表头关联）
    表明该列数据都归属“姓名”这一列头；而 表明该行数据时间维度是“2024年”
    滥用

    和	混用导致样式错乱 常见错误：把所有单元格都写成	（比如为了“看起来像表头”），或在非首行/首列位置误用	。这不仅让样式不可控，还会破坏表格结构语义，影响无障碍访问和 SEO。	应仅用于真正承担表头功能的单元格：行标题（scope="row"）、列标题（scope="col"）、或带 rowspan/colspan 的复合表头 例如：	姓名	2024年	后，CSS 选择器如 th:first-child 可能匹配到非预期位置，导致样式批量错位 响应式表格里	的文字截断与换行问题 小屏幕下，	文字过长常被截断或撑开表格。这时不能靠 white-space: nowrap 硬扛，而要结合语义调整。 优先用 th { white-space: normal; word-break: break-word; }，让长单词也能折行 若内容本质是缩写（如 “Avg. Response Time”），可用 Avg. 配合 abbr { text-decoration: none; cursor: help; }，既保持可读又节省空间 极端窄屏场景（如手机竖屏），考虑用 CSS @media 隐藏次要	并用 data-label 属性把表头信息移到	内部显示，而不是强行让	挤在一起 真正难处理的不是加粗居中本身，而是把	当作纯样式标签来用——它背后绑定着结构、语义、可访问性三层约束，绕开其中任何一层，后面都会冒出更隐蔽的问题。