table-layout: fixed 是长内容表格的起点，需配合明确列宽、三要素换行控制、colspan 显式居中及 padding 替代 height 实现稳定布局。
table-layout: fixed 是长内容表格的起点
默认的 table-layout: auto 会让浏览器反复计算每列宽度，遇到超长文本（如 URL、哈希值、JSON 片段）时，整列会被撑开，破坏布局。必须显式设 table-layout: fixed，才能让列宽按你定义的尺寸锁定。
但这个属性生效有前提：
-
<col>或第一行<td>必须带明确宽度（width: 200px或width: 25%），否则浏览器无据可依 - 不要混用
width和min-width在同一列上——min-width在 fixed 模式下被忽略 - 如果后端动态生成 HTML（比如 T-SQL 的 FOR XML），需确保第一行
<tr>包含完整<td>，不能只拼<tr><td>A</td><td>B</td></tr>却漏掉宽度控制
长文本换行必须三要素同时满足
只加 word-break: break-all 常常没反应，因为 <td> 默认是 white-space: nowrap，它直接压制所有换行逻辑。
真正起效要同时写清三件事：
立即学习“前端免费学习笔记（深入）”；
-
white-space: normal（或pre-wrap，若需保留原始换行符） -
overflow-wrap: break-word（对长单词/URL 自然断点，比如在/或.处） -
max-width: 200px（或对应列宽的合理值）——没有宽度边界，换行不触发
示例：<td style="white-space: normal; overflow-wrap: break-word; max-width: 180px;">https://example.com/api/v2/data/long-id-abc123def456</td>
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
colspan 跨列居中容易错位
跨列单元格（colspan="2"）想居中显示，不能靠父 <tr> 或 <table> 的 text-align，必须显式写在该 <td> 上。
常见翻车点：
-
<tr style="text-align:center"><td colspan="2">标题</td></tr>→ 无效，text-align不继承到跨列单元格 -
colspan值超过当前行总列数（如 3 列表里写colspan="4"）→ 后续单元格全部偏移，结构错乱 - 用了
table-layout: fixed却没给<col>设宽度 → 跨列单元格宽度不可控，视觉“偏左”或“偏右”
vertical-align: middle 看起来没居中？先看 padding
vertical-align: middle 本身没错，但表格单元格默认高度紧贴文字，加上字体行高（line-height）和上下空白挤压，就会显得“没居中”。
比硬设 height 更可靠的做法是：
- 去掉所有
height相关设置（height: 32px这类） - 统一用
padding: 8px 12px提供垂直空间，让vertical-align: middle有发挥余地 - 避免在
<td>里嵌套<div>后只设text-align: center——<div>是块级元素，需额外margin: 0 auto或display: flex
真正难调的是多行文本场景：vertical-align: middle 对齐的是“整行盒”的中点，不是每行文字中心。这时候加一点 line-height: 1.4 比调 vertical-align 更直观。
