text-align不能直接设在table上生效，因td/th默认不继承table的text-align；应直接设置td, th { text-align: center; }或用colgroup/col控制列对齐，或通过类选择器批量管理。

Html2md

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

下载

text-align 不能直接设在

上生效

很多人以为给 <table> 加 style="text-align: center" 就能让所有单元格文字居中，结果发现只有部分单元格响应——这是因为 text-align 的继承规则有陷阱：<td> 和 <th> 默认不继承父级的 text-align，除非它们自身没设置该属性且父容器是块级元素（而 <table> 是表格显示模式，非标准块级）。

• 最可靠的方式是直接作用于 <td> 和 <th>：用 CSS 选择器 td, th { text-align: center; }
• 若只想控制某列，用 <col> 配合 text-align（但注意：<col> 只支持 text-align、background 等极少数样式，且必须写在 <colgroup> 内）
• 避免写成 table { text-align: center; } 后以为万事大吉——它只影响 <table> 自身的文本（比如 caption），不穿透到单元格

用 colgroup + col 实现列级对齐（兼容性好但限制多）

<colgroup> 是少数能真正“批量控制列样式”的机制，但它只对 text-align、background、border 等有限属性有效，且必须放在 <thead> 或表头前，顺序必须与列一一对应。

<table>
  <colgroup>
    <col style="text-align: left">
    <col style="text-align: center">
    <col style="text-align: right">
  </colgroup>
  <tr><th>姓名</th><th>分数</th><th>排名</th></tr>
  <tr><td>张三</td><td>89</td><td>1</td></tr>
</table>

• 这个写法在所有现代浏览器和 IE8+ 都生效
• 但 <col> 不支持 font-size、color 等大多数文本样式
• 如果表格有动态列或 colspan/rowspan 复杂结构，<col> 的列序容易错位，建议优先用类选择器

用 class 批量控制比 inline style 更可控

给表格加一个类名（如 class="table-centered"），再用 CSS 规则统一约束，比每个 <td> 写 style="text-align:center" 强得多——既避免重复、又方便后期调整，还能防止内联样式被意外覆盖。

• 推荐写法：

  .table-centered td,
  .table-centered th {
    text-align: center;
  }

• 如果某些单元格需要例外（比如第一列姓名左对齐），再单独加类：<td class="text-left">张三</td>，配合 .text-left { text-align: left !important; }
• 注意：不要滥用 !important，它会让维护变困难；优先用更具体的选择器，比如 .table-centered tbody td:first-child

border-collapse 会影响 text-align 的视觉表现

当设置 border-collapse: collapse 时，单元格边框合并，文字对齐基准仍是单元格内容盒（content box），但视觉上容易误判是否对齐到位——尤其在带 padding 或 border 的单元格里。

立即学习“前端免费学习笔记（深入）”；

• 调试技巧：临时加 outline: 1px dashed red 查看单元格实际边界
• 若文字看起来“偏右”，可能是因为右侧 padding 过大，或用了 box-sizing: border-box 但未重置默认 padding
• 统一重置： td, th { padding: 8px; margin: 0; } 能显著提升对齐可预测性

对齐看似简单，但真正稳定生效依赖的是明确作用目标（td/th）、避免依赖继承、以及留意 border-collapse 和 padding 带来的视觉干扰。