表格中嵌入代码需转义HTML字符、禁用Tab缩进、设vertical-align:top和margin:0、加overflow-x:auto及white-space:pre-wrap防溢出错位。

表格里直接塞

<pre class="brush:php;toolbar:false;">会错位</H3>
<p>在 <code><td>

或 <th> 里直接写 <pre><code>，常出现缩进塌陷、横向溢出、上下间距异常——因为表格单元格默认不继承 <pre> 的块级行为，且 CSS 层叠容易被表格样式覆盖。

• 必须给 <td> 或 <th> 加 vertical-align: top，否则 <pre> 的默认基线对齐会让内容“悬空”
• <pre> 需显式设 margin: 0，否则表格单元格内自带的 padding + <pre> 默认 margin 叠加，导致高度失控
• 长代码行会撑破 <td> 宽度，必须配 overflow-x: auto 在 <pre> 上，而不是父表格或单元格
• 别用 white-space: pre-wrap 替代 <pre> —— 表格单元格里它无法可靠保留缩进层级，尤其 Python/YAML 等依赖空格的语法

HTML 特殊字符不转义就崩

表格单元格中嵌入代码时，<、>、& 不转义，浏览器会尝试解析成标签，轻则内容截断，重则破坏整个表格结构。比如 <tr> 出现在 <td> 里，可能被当成新行开始。

• 所有代码内容必须提前转义：< → ，<code>> → >，& → &
• 别依赖 Markdown 渲染器或 CMS 自动转义 —— 它们通常跳过 <pre> 内容，只处理正文
• 如果代码本身含 HTML 实体（如 ©），要双重转义：先转义实体符号，再转义尖括号，否则 © 会被解析成 © 符号，再被当作文本渲染

多行代码缩进必须用空格

表格单元格宽度有限，Tab 缩进在不同环境宽度不一致（4px vs 8px），会导致代码列错位、对齐失效，尤其对比相邻两列代码时更明显。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 统一用 2 或 4 个空格缩进，禁用 Tab 键
• 检查编辑器设置：VS Code 要关掉 “Insert Spaces”，Sublime Text 确保 “Indent Using Spaces” 开启
• 若从终端复制代码，先粘贴到纯文本编辑器（如 Notepad++）清理 Tab，再转义后填入 <pre><code>

表格响应式下代码块变窄怎么办

小屏设备上，表格常横向滚动，但 <pre> 默认不换行，代码被截断或触发整页横向滚动——用户得左右拖很久才能看清一行。

立即学习“前端免费学习笔记（深入）”；

• 给 <pre> 加 white-space: pre-wrap，它比 pre 多支持自动折行，且保留换行和空格
• 配合 word-break: break-all 防止超长无空格字符串（如 base64、URL）撑爆容器
• 避免设固定 width，用 max-width: 100% 让代码块随单元格收缩
• 如果必须保持原始缩进不可折行，就只加 overflow-x: auto，并确保父 <td> 有 min-width: fit-content，防止被压缩到看不见滚动条

真正麻烦的是混合场景：比如一列放命令 npm run build（该用 <code>），另一列放对应输出日志（该用 <pre><code>），稍不注意就混用标签或漏转义，结果页面结构突然错乱。