text-align必须加在<td>或<th>上才有效，加在<tr>或<table>上无效，因CSS规范禁止作用于<tr>；HTML的align属性会覆盖CSS，需彻底删除。
直接用 text-align: left 就行，但必须加在 <td> 或 <th> 上，不能只写在 <table> 或 <tr> 上——否则无效。
为什么 text-align 加在 <tr> 上没反应
浏览器不支持 text-align 作用于 <tr>，这是 CSS 规范明确禁止的。即使写了，Chrome/Firefox/Safari 都会忽略。真正起作用的是每个单元格自身的样式。
-
<tr style="text-align: left">→ 完全无效 -
<td style="text-align: left">内容</td>→ 有效 -
td { text-align: left; }→ 有效（推荐批量控制）
三种常用写法对比：内联、类选择器、全局重置
实际开发中选哪种，取决于你改的是单个单元格、某几列，还是整个表格。
- 单个单元格快速调试：
<td style="text-align: left">文本</td> - 某列统一左对齐（比如第一列姓名）：
td:nth-child(1) { text-align: left; } - 整表默认左对齐（推荐）：
td, th { text-align: left; }，再单独给金额列设text-align: right
容易被覆盖的隐藏坑：HTML align 属性优先级更高
如果 HTML 源码里还残留着 <td align="center"> 这类旧写法，它会覆盖 CSS 的 text-align，尤其在 Outlook、Android WebView 等环境里表现顽固。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具 Elements 面板，看是否
align属性被解析为内联样式 - 彻底删掉所有
align="..."，只保留 CSS 控制 - 若必须兼容老旧邮件模板，用
!important强制（但属于补救，非首选）
真正麻烦的不是“怎么左对齐”，而是当表格嵌套、有合并单元格（colspan/rowspan）、或混用 Flex 布局时，text-align 会被父容器的 display 类型干扰——这时候得先确认 <td> 本身没被设成 display: flex 或 inline，否则它就不再按块级规则响应 text-align 了。
