纯 html 能实现 diff 风格左右对比，关键在于用 控制列宽、 分左右块、合并空 对齐逻辑行，而非简单双列直排；必须放弃“每行一个单元格”直觉，通过三段式结构（ header + + ）和 css（table-layout: fixed、display: block 滚动、等宽字体栈）还原 diff 语义与视觉节奏。
如何用 HTML 表格实现 diff 风格的左右对比布局
直接说结论：纯 HTML <table> 能实现，但必须放弃“每行一个单元格”的直觉写法；关键在于用 <code><colgroup></colgroup> 控制列宽 + <tbody> 分块 + 合并空行来模拟代码 diff 的视觉节奏。<h3>为什么不能直接套用普通表格结构</h3>
<p>常见错误是把“左文件”和“右文件”各放一列，然后逐行填内容——这样会丢失 diff 最核心的语义：增删行（<code>+ / - ）、上下文行（ ）、空行对齐。浏览器渲染时，两列高度不一致会导致错位，尤其遇到长行换行或字体等宽差异时更明显。
- 左右列内容行数天然不等（比如左删了 3 行，右多了 5 行）
<tr> 是行级容器，无法跨行对齐不同列的“逻辑行”<li>没有原生支持 <code>@@ -12,5 +15,7 @@这类 hunk header 的语义标签-
table.diff { table-layout: fixed; }—— 防止内容撑开列宽 -
.left td:first-child, .right td:first-child { text-align: right; padding-right: 8px; }—— 行号右对齐，留白清晰 -
.del { background: #ffebee; }和.add { background: #e8f5e9; }—— 颜色要足够低饱和，避免刺眼 - 左右
<tbody> 需加 <code>max-height+overflow-y: auto，但必须设display: block才生效（表格子元素默认不支持滚动）最麻烦的是等宽字体兼容性：用
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;，别漏掉 Linux 下的Liberation Mono，否则行高错乱。
实际可落地的三段式表格结构
把一个 diff hunk 拆成三部分塞进一个 <table>：header 行（<code><thead>）、左侧代码块（<code><tbody class="left">）、右侧代码块（<code><tbody class="right">），用 <code>rowspan 和空 <td> 对齐关键行。<pre class="brush:php;toolbar:false;"></pre>
<table class="diff">
<colgroup>
<col width="30">
<!-- 行号 --><col width="45%">
<!-- 左 --><col width="30">
<!-- 分隔符 --><col width="45%">
<!-- 右 -->
</colgroup>
<thead><tr><th colspan="4"><code>@@ -12,5 +15,7 @@
+ new line context注意：<tbody> 必须分开，否则 CSS 无法单独控制左右滚动；<code>colgroup 宽度设为百分比会受内容挤压，固定像素更稳；分隔符列用 Unicode 竖线 │ 比 border 更可靠。
容易被忽略的 CSS 关键点
表格本身只是骨架，真正让 diff “看起来像 diff”的是 CSS 细节：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
