必须使用 <table> 而非 Flex/Grid，因其天然支持行级对齐、语义归属与辅助技术识别；<td> 内禁用 <pre>，需设 white-space: pre 等样式保等宽；响应式下靠列折叠与 data-label 维持语义完整性。
<table> 在在线 IDE 的代码差异对比场景中，不是装饰性容器，而是承载「行级对齐 + 字符级高亮 + 左右语义归属」的结构核心。用 <code><div> 模拟表格会直接导致 diff 行错位、键盘导航断裂、屏幕阅读器无法识别“左删/右增”逻辑关系——这不是样式问题，是语义失效。
<h3>为什么必须用 <code><table> 而不是 Flex/Grid 布局
<p>在线 IDE 的 diff 视图本质是二维映射：左侧原始行 ↔ 右侧修改行 ↔ 中间操作标记（<code>±、→）。只有 <table> 能天然保证：
<ul>同一 <code><tr> 内的左右 <code><td> 强制垂直对齐，哪怕某侧内容换行或含长字符串<br>浏览器原生支持列宽自动收缩/拉伸（<code>table-layout: auto），无需 JS 计算列宽<th scope="col"> 可明确标注“左侧文件”“右侧文件”，供辅助技术理解上下文<br>打印时整行保持完整，不会被截断或错行
<p>Flex/Grid 在小屏缩放、字体等宽切换、行号溢出时极易发生左右列错位，且无法通过 CSS 修复——这是 DOM 结构缺陷，不是样式能补救的。</p>
<h3><code><td> 里嵌套 <code><pre class="brush:php;toolbar:false;"></pre> 和 <span></span> 的写法陷阱
diff 内容需保留空格、换行、语法高亮，但 <td> 默认会折叠空白、禁用换行。常见错误写法：<code><td><pre>...</pre></td> —— 这会导致 <pre class="brush:php;toolbar:false;"></pre> 失去等宽字体继承，且上下边距破坏行高一致性。
- 正确做法：给
<td> 设置 <code>white-space: pre; font-family: monospace; line-height: 1.4;，内部直接用 <span class="del">...</span> 或 <ins>...</ins> 包裹差异片段禁止在
<td> 内再套 <code><pre class="brush:php;toolbar:false;"></pre> —— 它会触发额外的块级格式化上下文，干扰行高对齐所有行号单元格（首列）必须用
<th scope="row">，而非 <code><td>；否则屏幕阅读器无法将“第42行”与左右代码行关联
<h3>响应式下如何避免横向滚动却保持 diff 语义</h3>
<p>给 <code><table> 父容器加 <code>overflow-x: auto 是底线方案，但用户拖动时焦点丢失、键盘无法导航。真正可用的是「列折叠 + data-label 注入」：立即学习“前端免费学习笔记（深入）”；
- 小屏下（
max-width: 768px）用媒体查询隐藏非关键列（如空行标记、上下文行），仅保留「行号」「左侧内容」「右侧内容」三列为每个
<td> 添加 <code>data-label="左侧代码" 或 data-label="右侧代码"，配合 CSS :before { content: attr(data-label) ": " } 显式标注来源禁用
colspan 合并 diff 操作符列（如 →）——它会让移动端堆叠后语义混乱，改用独立 <td> 并设固定窄宽<br>所有 <code><th> 必须带 <code>scope 属性，漏掉一个，整个表格在 VoiceOver 下就退化成无序文本流
复杂点不在怎么写样式，而在每一行 <tr> 是否真实表达「一行原始代码 ↔ 一行目标代码」的映射关系。一旦这个前提松动，后续所有高亮、跳转、导出功能都会失准。</tr>
