text-align作用对象必须是td或th，而非tr或table；因tr不渲染内容，该样式不会继承到单元格，浏览器仅识别td/th上的设置。
text-align 作用对象必须是 td 或 th，不是 tr 或 table
很多人给 <tr> 加 style="text-align: center;"，结果没生效——因为 tr 本身不渲染内容，text-align 不会向下继承到单元格。浏览器实际只认 td 和 th 上的该样式。
实操建议：
- 对单列统一控制：用
<col>标签配合类名，例如<col class="center-col">，再写 CSS：.center-col { text-align: center; } - 对整表所有列生效：
td, th { text-align: center; }（推荐放在外部样式表或<style>块中） - 避免在
<table>上设text-align试图“一劳永逸”——它确实会继承，但容易被更具体的选择器（比如td自身的样式）覆盖，排查困难
用 colgroup + col 控制特定列最稳定
当表格列数固定、且只需某几列居中时，<colgroup> 是语义清晰又不易被覆盖的方式。它直接绑定列结构，不受后续 DOM 变动影响。
示例：
立即学习“前端免费学习笔记（深入）”；
<table>
<colgroup>
<col> <!-- 第1列，默认左对齐 -->
<col style="text-align: center;"> <!-- 第2列居中 -->
<col class="right-col"> <!-- 第3列用类名控制 -->
</colgroup>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
</tbody>
</table>CSS 中定义：.right-col { text-align: right; }
注意：<col> 不支持 vertical-align，垂直居中仍需单独在 td/th 上设置。
内联样式 style="text-align: center;" 在 td 上有效，但别滥用
临时调试或动态生成表格时，直接写 <td style="text-align: center;">内容</td> 确实最快。但它把样式逻辑混进结构，维护成本高，且易被 JS 操作覆盖（比如某些表格插件会重写 innerHTML 并丢弃内联样式）。
常见错误现象：
- 用 JS 动态插入
td后发现没居中——检查是否漏写了style属性，或被框架默认样式覆盖 - 移动端 WebView 渲染异常，尤其在旧版 Android 系统里，内联样式优先级可能低于预置 UA 样式
- 和
direction: rtl共存时，text-align: center依然有效，但若父级有dir="rtl"，视觉上文字顺序会反，别误判为居中失效
为什么给 td 设 margin: 0 auto 不能居中文本？
td 默认是 display: table-cell，而 W3C 规范明确禁止对该显示类型设置 margin。写上去完全无效，开发者工具里也看不到计算值。
如果你真想让某列内容“视觉上更居中”，可考虑：
- 加
padding-left和padding-right对称值，但这是“模拟居中”，非真正对齐 - 单元格内嵌
<div style="margin: 0 auto; width: fit-content;">内容</div>—— 这依赖div的块级行为，但会破坏表格语义，且在窄屏下可能换行错位 - 改用 Flex：给
td加display: flex; justify-content: center;，但注意这会让vertical-align失效，垂直方向需额外配align-items: center
真正可靠的做法，始终是回到 text-align 作用于 td 或其父级 col —— 它不依赖 display 类型变更，兼容性好，且符合表格语义。
