如何让HTML表格单元格内的代码块实现滚动效果？

咱们先搞明白问题根源：表格单元格默认会完全自适应内容的尺寸，不管内容多长多高，它都会跟着撑开，导致里面的<pre><code>代码块根本没机会触发滚动效果；而表格外的div没有这个“自动撑开”的特性，所以设置overflow就能正常滚动。

要让表格里的代码块和div里的表现一致，只需要两步：

1. 给表格添加固定布局约束 #

给表格设置table-layout: fixed，这样表格就不会再跟着内容无限变宽，而是遵循容器的宽度限制，单元格的尺寸也会被约束住。CSS代码如下：

.table-fixed {
  table-layout: fixed;
  width: 100%; /* 确保表格占满父容器宽度 */
}

2. 给单元格内的代码块设置滚动规则 #

直接给表格单元格里的<pre>标签设置最大高度和溢出滚动属性，同时保留代码的原有格式：

.table-fixed td pre {
  max-height: 300px; /* 可根据需求调整这个高度值 */
  overflow-x: auto; /* 横向内容超出时显示滚动条 */
  overflow-y: auto; /* 纵向内容超出时显示滚动条 */
  white-space: pre; /* 保留代码的换行和空格格式 */
  word-wrap: normal; /* 禁止代码自动换行，保持原有排版 */
}

修改后的完整代码示例 #

把上面的样式加到你的页面里，再给表格加上对应的类名，就能实现滚动效果了：

<div class="container mt-5 mb-5">
  <style>
    .table-fixed {
      table-layout: fixed;
      width: 100%;
    }
    .table-fixed td pre {
      max-height: 300px;
      overflow-x: auto;
      overflow-y: auto;
      white-space: pre;
      word-wrap: normal;
    }
  </style>
  <table class="table table-bordered table-fixed">
    <tbody>
      <tr>
        <th>Code</th>
        <td>
          <pre>
            <code class="language-csharp">Prism.languages.markup = { 'comment': /&lt;!--[\s\S]*?--&gt;/, 'prolog': /&lt;\?[\s\S]+?\?&gt;/, 'doctype': /&lt;!DOCTYPE[\s\S]+?&gt;/i, 'cdata': /&lt;!\[CDATA\[[\s\S]*?]]&gt;/i, 'tag': { pattern: /&lt;\/?(?!\d)[^\s&gt;\/=$&lt;]+(?:\s+[^\s&gt;\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'"&gt;=]+))?)*\s*\/?&gt;/i, inside: { 'tag': { pattern: /^&lt;\/?[^\s&gt;\/]+/i, inside: { 'punctuation': /^&lt;\/?/, 'namespace': /^[^\s&gt;\/:]+:/ } }, 'attr-value': { pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'"&gt;=]+)/i, inside: { 'punctuation': [ /^=/, { pattern: /(^|[^\\])["']/, lookbehind: true } ] } }, 'punctuation': /\/?&gt;/, 'attr-name': { pattern: /[^\s&gt;\/]+/, inside: { 'namespace': /^[^\s&gt;\/:]+:/ } } } }, 'entity': /&amp;#?[\da-z]{1,8};/i };
            </code>
          </pre>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <pre>
      <code class="language-csharp">Prism.languages.markup = { 'comment': /&lt;!--[\s\S]*?--&gt;/, 'prolog': /&lt;\?[\s\S]+?\?&gt;/, 'doctype': /&lt;!DOCTYPE[\s\S]+?&gt;/i, 'cdata': /&lt;!\[CDATA\[[\s\S]*?]]&gt;/i, 'tag': { pattern: /&lt;\/?(?!\d)[^\s&gt;\/=$&lt;]+(?:\s+[^\s&gt;\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'"&gt;=]+))?)*\s*\/?&gt;/i, inside: { 'tag': { pattern: /^&lt;\/?[^\s&gt;\/]+/i, inside: { 'punctuation': /^&lt;\/?/, 'namespace': /^[^\s&gt;\/:]+:/ } }, 'attr-value': { pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'"&gt;=]+)/i, inside: { 'punctuation': [ /^=/, { pattern: /(^|[^\\])["']/, lookbehind: true } ] } }, 'punctuation': /\/?&gt;/, 'attr-name': { pattern: /[^\s&gt;\/]+/, inside: { 'namespace': /^[^\s&gt;\/:]+:/ } } } }, 'entity': /&amp;#?[\da-z]{1,8};/i };
      </code>
    </pre>
  </div>
</div>

额外优化提示 #

如果想精准控制表格列的宽度，直接给<th>或者<td>添加width样式就行，比如：

<th style="width: 150px;">Code</th>

这样第一列就会固定宽度，剩下的宽度会自动分配给代码所在的单元格。

内容的提问来源于stack exchange，提问作者Sergiu Tripon