让表格整齐的关键是控制列宽、对齐方式和容器行为；必须用 table-layout: fixed + <col> 设列宽，text-align/vertical-align 直接作用于单元格，外层 div 包裹并设 overflow-x: auto。

表格“看起来乱”，90%不是内容问题，而是结构或样式失控导致的。真正让表格整齐的关键不是加更多边框或调字体，而是控制列宽、对齐方式和容器行为这三件事。

table-layout: fixed 是列宽稳定的唯一可靠手段

默认的 table-layout: auto 会让浏览器扫描所有单元格内容再算列宽——一列塞进“2026年第三季度营收同比增长12.78%”，整列就撑开，其他列被挤变形，后续 JS 动态插入新行还会触发重排。

强制设为 table-layout: fixed 后，列宽只由第一行（或 <col>）决定，后续内容再长也不会影响布局：

<table style="table-layout: fixed; width: 100%;">
  <col style="width: 20%;">
  <col style="width: 50%;">
  <col style="width: 30%;">
  <thead><tr><th>ID</th><th>姓名</th><th>备注</th></tr></thead>
  <tbody><tr><td>1001</td><td>张三</td><td>超长文本不会撑开第三列</td></tr></tbody>
</table>

• <col> 必须写在 <thead> 之前，Safari 等浏览器否则会忽略
• 不要混用 width 属性和 CSS width，优先用 <col> + CSS
• 如果第一行是空的（比如只有 <th>），列宽可能失效，确保第一行有实际宽度参考

text-align 和 vertical-align 必须直接作用于 td/th

align 属性（如 <td align="right">）在 HTML5 中已废弃，W3C 验证器报错，iOS WebView 和现代浏览器严格模式下直接不生效。

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

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

水平对齐必须用 CSS text-align，且只能设在 <td> 或 <th> 上（设在 <tr> 上无效）；垂直对齐同理，vertical-align 只对单元格生效：

• 整列右对齐？用 <col class="num-col"> + .num-col { text-align: right; }
• 想让某列文字全部顶到单元格顶部？给该列 <td> 加 style="vertical-align: top;"
• 表头居中+加粗？th { text-align: center; font-weight: bold; }，别依赖 <center> 或 align

外层容器 overflow-x: auto 是移动端不溢出的底线方案

宽表格在手机上横向滚动是刚需，但仅给 <table> 加 overflow-x: auto 没用——table 默认是 display: table，不触发块级滚动上下文。

必须用一个包裹容器，并设 overflow-x: auto：

<div style="overflow-x: auto;">
  <table>...</table>
</div>

• 这个 <div> 是必须的，没有它，小屏上表格要么换行错位，要么直接溢出页面看不见
• 配合 border-collapse: collapse 消除边框间隙，避免滚动时出现“虚线抖动”
• 如果用 Bootstrap，直接套 <div class="table-responsive"> 更省事

最容易被忽略的一点：表格整齐的前提是结构干净。检查 <thead>、<tbody> 是否完整嵌套，rowspan/colspan 数值是否超出当前行列数——哪怕只是多写了一个 <td>，都可能导致整行错位，而且开发者工具里不容易一眼看出来。