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