必须对表格中的代码块进行HTML转义并用CSS约束尺寸：<pre>需设overflow-x:auto和max-width:100%，<code>需设display:block，缩进统一用空格，避免Tab导致错位。
表格里直接塞会撑破列宽</H3>
<p>表格单元格（<code><td></code>）默认是收缩内容的，但<code><pre></code>自带块级行为和固定空白渲染，一旦代码行过长或缩进多，它就会无视<code><td></code>宽度限制，横向溢出甚至破坏整个表格布局。</p>
<ul>
<li>别把<code><pre></code>当普通文本塞进<code><td></code>——它不继承父容器的<code>max-width</code>或<code>overflow</code></li>
<li><code><pre></code>在表格中默认没有滚动条，长代码直接把表格拉宽，移动端尤其明显</li>
<li>如果还嵌了<code><code></code>但没设<code>display: block</code>，<code><code></code>作为行内元素会进一步干扰对齐</li>
</ul>
<H3>必须用<pre class='brush:php;toolbar:false;'>嵌套 + CSS强制约束</H3>
<p>只靠HTML标签不够，得用CSS锁住尺寸和行为。核心是让<code><pre></code>变成可滚动的“盒子”，同时保证<code><code></code>正确继承格式语义。</p>
<ul>
<li><code><pre></code>上加<code>overflow-x: auto</code>和<code>max-width: 100%</code>，防止撑破表格列</li>
<li><code><code></code>必须设<code>display: block</code>——否则它还是行内元素，无法响应<code><pre></code>的宽高控制</li>
<li>给<code><pre></code>设<code>white-space: pre</code>（虽然<code><pre></code>默认就有，但某些重置样式会覆盖，显式声明更稳）</li>
<li>避免给<code><code></code>单独设<code>white-space: pre</code>，它已从<code><pre></code>继承，重复设置可能冲突</li>
</ul>
<p>示例结构：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><td><pre style="overflow-x:auto;max-width:100%"><code style="display:block">function test() {<br> return "ok";<br>}</code></pre></td>
HTML特殊字符不转义，表格结构就崩
表格里嵌代码最隐蔽的坑：代码里的<、<code>>、&会被浏览器当成HTML标签解析，轻则内容消失，重则闭合<td>或<tr>，整行错位。
- 所有代码内容必须提前转义：
<→，<code>>→>，&→& - 别指望Markdown渲染器或CMS自动处理
<pre>里的内容——很多系统只对正文转义，对<pre>放行 - 像
<div class="x">这种片段，不转义就会变成真实DOM节点，可能吞掉后续</td>
缩进用Tab还是空格？表格里必须统一用空格
表格渲染对缩进极其敏感。不同编辑器对Tab的宽度解释不一致（2/4/8空格），同一段代码在不同环境里可能左移或右飘，导致表格列宽抖动或文字错位。
立即学习“前端免费学习笔记（深入）”；
- 所有缩进严格用空格，推荐2或4个——这是唯一能跨编辑器、跨浏览器保持对齐的方式
- 不要混用Tab和空格，哪怕只有一行用了Tab，整块代码在表格里都可能偏移
- 如果用VS Code或WebStorm，打开“insert spaces instead of tabs”并设为2/4，保存前全选+格式化一次
真正麻烦的不是写法本身，而是表格这个上下文放大了所有细节问题：缩进不一致、字符未转义、CSS漏设——任何一个都会让代码块在单元格里“站不稳”。
