table-layout: fixed 是长内容表格的起点，需配合明确列宽、三要素换行控制、colspan 显式居中及 padding 替代 height 实现稳定布局。
table-layout: fixed 是长内容表格的起点
默认的 table-layout: auto 会让浏览器反复计算每列宽度，遇到超长文本（如 URL、哈希值、JSON 片段）时，整列会被撑开，破坏布局。必须显式设 table-layout: fixed，才能让列宽按你定义的尺寸锁定。
但这个属性生效有前提：
-
<col>或第一行<td> 必须带明确宽度（<code>width: 200px或width: 25%），否则浏览器无据可依 - 不要混用
width和min-width在同一列上——min-width在 fixed 模式下被忽略 - 如果后端动态生成 HTML（比如 T-SQL 的 FOR XML），需确保第一行
<tr> 包含完整 <code><td>，不能只拼 <code><tr> <td>A</td> <td>B</td> </tr>却漏掉宽度控制长文本换行必须三要素同时满足
只加
word-break: break-all常常没反应，因为<td> 默认是 <code>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>
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
colspan 跨列居中容易错位
跨列单元格（
colspan="2"）想居中显示，不能靠父<tr> 或 <code><table> 的 <code>text-align，必须显式写在该<td> 上。 <p>常见翻车点：</p> <ul> <li> <code><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> 里嵌套 <code><div> 后只设 <code>text-align: center——<div> 是块级元素，需额外 <code>margin: 0 auto或display: flex真正难调的是多行文本场景：
vertical-align: middle对齐的是“整行盒”的中点，不是每行文字中心。这时候加一点line-height: 1.4比调vertical-align更直观。
