Git diff 默认不支持 HTML 表格横向比对，因其按行处理嵌套标签；需用 BeautifulSoup/jsdom 解析并扁平化为 CSV/TSV，配合 .gitattributes 和 .gitconfig 配置 textconv 实现语义级列对齐比对。
Git diff 默认不支持 HTML 表格的横向比对
HTML 表格本身是结构化文本，但 Git 的 git diff 默认按行处理，遇到 <table>、<tr>、<td> 这类嵌套标签时，会把整行（哪怕只是 <td>abc</td>）当作一个原子单位。结果就是：两版 HTML 表格稍有结构调整，diff 就显示大片删除+新增，根本看不出哪一列或哪一行变了。
真正起作用的是外部工具——不是 Git 本身，也不是浏览器渲染逻辑，而是能解析 HTML 并按语义提取表格单元格进行对齐比对的程序。
用 diff-so-fancy + 自定义 HTML 表格预处理器
直接用 diff-so-fancy 不行，它只美化纯文本 diff，不理解 HTML 结构。必须先让 HTML 表格“扁平化”成可逐列比对的格式。
- 写一个轻量脚本（Python 或 Node.js），用
BeautifulSoup或jsdom解析 HTML，提取所有<table>，转成 CSV 或带行列坐标的 TSV（例如：row_0_col_1,Name） - 在
.gitattributes中声明：*.html diff=html-table - 在
.gitconfig中配置：diff.html-table.textconv = ./scripts/flatten-tables.py - 确保
flatten-tables.py输出稳定：相同表格结构必须生成完全一致的文本顺序（比如固定按<thead>优先、再<tbody>，列顺序按 DOM 树遍历而非视觉顺序）
VS Code 内置 diff 不显示横向表格差异的原因
VS Code 的内置 diff 视图本质仍是行级比对，即使你打开两个 HTML 文件并手动对比，它也不会自动识别 <th> 和对应 <td> 的列关系。你看到的“左右并排”只是界面布局，内容对齐仍依赖文本行匹配。
立即学习“前端免费学习笔记（深入）”；
可行的绕过方式：
- 在 VS Code 中安装
Compare Folders插件，配合前述 CSV 扁平化输出，把两个版本的表格 CSV 并排打开 - 用浏览器打开两个 HTML 文件，用开发者工具分别复制
document.querySelector('table').outerHTML，粘贴到在线 diff 工具（如text-compare.com），但需提前手动删掉无关空格和换行，否则列对齐失效 - 禁用 HTML 格式化插件（如 Prettier），避免保存时自动重排
<tr>顺序，导致 diff 假阳性
横向布局 ≠ 列对齐，关键在坐标映射
所谓“横向排列布局”，不是指 UI 上左右分栏，而是 diff 工具能否把 A 版本第 2 行第 3 列和 B 版本第 2 行第 3 列真正对应起来。这要求：
- 表格结构不能动态生成（如 JS 渲染后才插入
<td>），否则静态解析器抓不到内容 - 合并单元格（
colspan/rowspan）必须被显式展开为占位符（例如空字符串或[merged]），否则行列坐标错位 - 同一份 HTML 中多个
<table>必须用唯一 ID 或注释标记区分，不然扁平化时会混在一起
没有通用方案能开箱即用，每次表格结构变更（比如加一列或改表头）都得同步更新解析逻辑——这点容易被忽略，直到某次 diff 显示“整表不同”才意识到是 colspan 处理漏了。
