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