整行水平居中必须作用于<td>和<th>，而非仅设<tr>的text-align；因<tr>不渲染文本，其样式仅透传且易被子单元格内联样式或高优先级CSS覆盖。
整行水平居中，不是给 <tr> 加 text-align: center 就完事——它只起部分作用，且容易被子单元格覆盖。
为什么 <tr> 上设 text-align: center 有时没效果
因为 text-align 在 <tr> 上只是“透传默认值”，真正生效的是每个 <td> 或 <th> 自己的 text-align。如果某列单元格写了 style="text-align: left;"，或外层 CSS 有更具体的规则（比如 td:nth-child(2) { text-align: right; }），那 <tr> 的设置就被覆盖了。
常见错误现象：<tr style="text-align: center;"> 写了，但第三列还是左对齐——大概率是该列 <td> 有更高优先级的内联样式，或 CSS 类里显式写了 text-align: left。
- 浏览器默认：
<th>是text-align: center，<td>是text-align: left -
<tr>不是渲染内容的容器，它不直接参与文本对齐计算 - 想统一控制整行，最稳的方式是批量作用于
<td>和<th>，而不是依赖<tr>
让一整行内容水平居中的正确写法
直接在 <tr> 上加样式不行？那就绕过它，用选择器精准命中该行所有单元格：
立即学习“前端免费学习笔记（深入）”；
<tr class="row-center"> <td>A</td> <td>B</td> <td>C</td> </tr>
对应 CSS：
.row-center td,
.row-center th {
text-align: center;
}如果只针对某一行（比如第二行），也可以用 :nth-child()：
tr:nth-child(2) td,
tr:nth-child(2) th {
text-align: center;
}- 不要写
tr:nth-child(2) { text-align: center; }—— 它不保证所有单元格都响应 - 内联样式如
<td style="text-align: left;">会覆盖上述规则，需检查并移除或提高选择器权重 - 若该行含
<th>（比如表头行后跟汇总行），记得把th也包含进去，否则表头列可能不一致
整行居中但某几列要例外怎么办
比如整行居中，但金额列要右对齐、序号列要左对齐——这时得用列定位覆盖：
.row-center td,
.row-center th {
text-align: center;
}
/* 第二列（金额）右对齐 */
.row-center td:nth-child(2),
.row-center th:nth-child(2) {
text-align: right;
}
/* 第一列（序号）左对齐 */
.row-center td:first-child,
.row-center th:first-child {
text-align: left;
}关键点：
- 顺序很重要：通用规则写在前，特例规则写在后
- 避免用
!important，靠选择器 specificity 解决（比如.row-center td:nth-child(2)比.row-center td权重高） - 如果表格用了
<colgroup>+<col>，也可以给<col>加类再配 CSS，但注意<col>不支持text-align，得靠class配合后代选择器
别踩这个坑：用 align="center" 写在 <tr> 上
HTML5 已废弃 align 属性，<tr align="center"> 在现代浏览器虽可能“看起来有效”，但行为不可靠：
- 它等效于给每个单元格加
align="center"，但和 CSS 冲突时解析逻辑混乱 - W3C 验证器报错，无障碍工具可能忽略或误读
- 在某些邮件客户端或旧版 WebView 中完全失效
- 无法与
vertical-align协同工作，垂直对齐还得另配
真正复杂的地方在于：你改的是一行的“表现”，但实际生效的是每个单元格自己的对齐策略。只要单元格没被显式覆盖，text-align 就能穿透；一旦有内联样式或高权重类，就得去查那个具体元素——而不是回头怪 <tr> 没设对。
