用<table>做代码差异对比的核心是语义对齐而非高亮，需先完成转义、行对齐、状态分类三步预处理，再用<tr>逐行封装，配合<pre>保留格式、CSS区分状态、独立行号列及移动端滚动优化。
用 <table> 做代码差异对比，核心是语义对齐而非高亮
直接用 <table> 展示两列代码差异可行，但别指望它自动识别增删——它只负责排版。真正起作用的是你提前处理好的行级对齐结果。比如 Git diff 输出的 +line / -line 不能直接塞进表格，得先按逻辑行拆解、补空、标记状态。
常见错误是把原始 diff 文本原样丢进 <td>，导致左右列行数不一致、缩进错乱、特殊字符（如 &、<）被 HTML 解析破坏。必须先做三件事：转义、行对齐、状态分类。
- 用
document.createTextNode()或textContent插入内容，避免手动拼接字符串引发 XSS 或解析错误 - 每对对比行应封装为一个
<tr>，左列放“原代码”，右列放“修改后”，缺失行用<td> </td>占位 - 用 CSS class 区分状态：比如
diff-add、diff-del、diff-change，不要依赖背景色硬编码
<pre> 必须嵌套在 <td> 里，且禁用换行截断
<pre> 是保留代码格式的关键，但它默认会继承父容器样式。如果 <td> 有 white-space: normal（浏览器默认），<pre> 就失效了。
实操时必须显式重置：
立即学习“前端免费学习笔记（深入）”；
td pre {
white-space: pre;
margin: 0;
padding: 4px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 12px;
line-height: 1.5;
}
注意两点：
- 不要用
white-space: pre-wrap—— 它会让长行自动折行，破坏代码对齐 - 避免给
<td>设固定宽度，否则小屏下<pre>溢出不可滚动；改用overflow-x: auto+max-width - 如果代码含制表符（
\t），<pre>默认显示为 8 字符宽，需加tab-size: 4统一
diff 行号怎么对齐？用空单元格比 JavaScript 计算更稳
很多人想用 JS 动态计算左右列行号偏移，结果遇到空行、折叠块、多行插入就错位。最简单可靠的方式是：把行号也作为独立列，且和代码列严格绑定。
结构建议这样写：
<tr>
<td class="line-num">12</td>
<td class="code-origin"><pre>function foo() {</pre></td>
<td class="code-modified"><pre>function bar() {</pre></td>
</tr>
好处是：
- 行号列宽度固定（如
min-width: 3em），不会被代码长度挤压 - 当某侧无对应行时，行号列填
<pre></pre>，视觉上自然留空 - 完全规避 JS 同步问题，服务端渲染或静态 HTML 都能直接用
移动端表格横向滚动要防“双滚动条”陷阱
两列代码并排，在手机上必然要横向滚动。但很多人只给 <table> 加 overflow-x: auto，结果页面出现两个滚动条：外层页面滚 + 内层表格滚，体验极差。
正确做法是限制容器宽度并隔离滚动：
- 用包裹
<div class="diff-container">，设overflow-x: auto和width: 100% -
<table>设min-width: fit-content（或具体值如min-width: 800px），防止被压缩 - 禁用
<td>的text-overflow: ellipsis—— 代码截断等于废掉对比功能 - 测试时重点看 iOS Safari：它对
overflow-x支持不稳定，有时需加-webkit-overflow-scrolling: touch
真正的难点不在写法，而在于你是否提前把 diff 结果做了行粒度归一化——没这步，HTML 表格再规范也对不齐。
