pre标签直接嵌入td会导致错位，因white-space:pre和无宽度约束使长代码溢出；应设white-space:pre-wrap、max-width:100%、overflow-x:auto，并确保table-layout:fixed。
PRE标签在TABLE里直接用会错位
直接把 <pre class="brush:php;toolbar:false;"></pre> 塞进 <td> 里，多数浏览器会撑开单元格、破坏表格布局，尤其遇到长代码行时，<code><pre class="brush:php;toolbar:false;"></pre> 默认不换行，整块内容横向溢出。
根本原因是 <pre class="brush:php;toolbar:false;"></pre> 的 CSS 默认样式含 white-space: pre 和无宽度约束，而 <td> 默认是 <code>table-cell，不主动处理内部块级元素的尺寸。
- 加
overflow-x: auto到<td> 或 <code><pre class="brush:php;toolbar:false;"></pre>上，强制出现水平滚动条 - 给
<pre class="brush:php;toolbar:false;"></pre>加max-width: 100%+word-break: break-all（慎用，会断开单词） - 更稳妥的是用
white-space: pre-wrap替代默认的pre，让长行自动折行 -
<pre class="brush:php;toolbar:false;"></pre>外层<td> 设 <code>vertical-align: top，避免文字基线对齐导致上下偏移 -
<pre class="brush:php;toolbar:false;"></pre>自身设margin: 0、padding: 8px（默认 padding 过大）、font-family: monospace - 加
white-space: pre-wrap后，再补overflow-wrap: break-word，兼顾缩进保留和长行可控 - 如果要等宽字体且字号统一，建议用
font-size: 0.9em，避免在小屏上撑爆表格
用CSS控制PRE在TD里的行为
只靠 HTML 标签没法解决格式和布局冲突，必须配 CSS。关键不是“怎么放”，而是“怎么压住它”。
实际写法示例：带滚动的可读代码单元格
下面这段可以直接复制使用，已验证在 Chrome/Firefox/Edge 下表现一致：
<td style="vertical-align: top; padding: 4px;">
<pre class="brush:php;toolbar:false;" style="margin: 0; padding: 8px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.85em; white-space: pre-wrap; overflow-x: auto; background: #f6f6f6; border-radius: 3px;">console.log("Hello\nWorld");
注意几个硬性点：font-family 列了多个备选，防止本地没装 Consolas；background 和 border-radius 是为了视觉区分，非必需；overflow-x: auto 必须配合固定宽度容器（比如表格设了 table-layout: fixed）才可靠，否则滚动条可能不出现。
替代方案：用CODE+PRE组合或纯CSS模拟
如果项目里禁用 <pre class="brush:php;toolbar:false;"></pre>，或需要更细粒度控制（比如高亮某几行），可以不用 <pre class="brush:php;toolbar:false;"></pre>，改用 <code> 配 white-space: pre：
<code>是行内元素，需手动设display: block才能当块用- 这样更容易套 class，比如
<code class="js">，方便后续加 Prism.js 高亮 - 但原始换行符（
\n）在<code>里不会生效，得转成<br>或用 JS 处理，不如<pre class="brush:php;toolbar:false;"></pre>直观
真正容易被忽略的，是表格本身是否设了 table-layout: fixed —— 没设的话，pre 的宽度计算逻辑会失效，所有 CSS 控制都可能白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
