为何含pre/code标签的表格td不遵循CSS width:50%设置？

我在浏览GitHub文档时觉得表格可读性差，想调整CSS优化样式，结果发现表格里的td元素不遵守设置的width属性。我做了一个示例，里面有两个表格：一个是纯文本内容，另一个有单元格包含pre和code标签。我给所有td设了width: 50%，纯文本表格的单元格能遵守这个样式，但带pre/code的表格却不行，哪怕只有一个单元格有这些标签，整个表格的所有单元格都会受影响。这是什么原因？

代码示例 #

CSS代码 #

:root {
  --color-border-muted: #21262d;
  --color-canvas-default: #0d1117;
  --color-fg-default: #c9d1d9;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
}

body {
  /* Styles from GitHub docs */
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

table {
  /* Styles from GitHub docs */
  display: table;
  border-collapse: collapse;
  position: relative;
  font-size: 90%;
  width: 100%;
  line-height: 1.5;
  table-layout: auto;
  word-wrap: break-word;
  color: var(--color-fg-default);
}

table tr {
  /* Styles from GitHub docs */
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}

td {
  /* STYLE THAT MARKS THAT CELL WIDTH SHOULD ONLY BE 50% */
  width: 50%;
  border: 1px solid var(--color-border-muted);
  padding: 0.5rem;
}

pre {
  /* Styles from GitHub docs */
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
  margin-top: .5rem;
  border: 1px solid var(--color-border-default);
  word-wrap: normal;
}

HTML代码 #

<table>
  <tbody>
    <tr>
      <td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>
<br />
<table>
  <tbody>
    <tr>
      <td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td>
      <td>World</td>
    </tr>
    <tr>
      <td><pre><code class="hljs language-yaml"><span class="hljs-attr">run-name:</span> <span class="hljs-string">${{</span> <span class="hljs-string">github.actor</span> <span class="hljs-string">}}</span> <span class="hljs-string">is</span> <span class="hljs-string">learning</span> <span class="hljs-string">GitHub</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span></code></pre></td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

原因分析与解决方案 #

核心原因 #

1. 表格布局模式：你设置了table-layout: auto，这是浏览器默认的自动布局模式。这种模式下，浏览器会优先计算所有单元格内容的最小宽度，再根据内容动态调整列宽——如果某个单元格里的内容（比如pre中的长代码）无法换行，就会强制撑开列宽，直接忽略你设置的width属性。
2. pre的换行规则：pre标签默认保留原始格式不换行，你额外设置的word-wrap: normal进一步强化了这个特性，导致长代码完全无法换行，直接撑大所在单元格，进而影响整列的宽度（表格的列宽是整列统一的）。

解决方案 #

方案1：改用固定表格布局

把表格的table-layout改为fixed，浏览器会严格按照你设置的列宽分配空间，不受内容影响：

table {
  /* 替换原有table-layout属性 */
  table-layout: fixed;
}

同时需要给pre添加换行处理，避免内容溢出单元格：

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

方案2：让pre内容自动换行

如果不想修改表格布局，仅调整pre的样式，让长代码能自动换行，这样单元格就不会被撑大：

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

这种方式保留了表格的自动布局特性，同时解决了内容撑宽的问题。

内容的提问来源于stack exchange，提问作者Black Wind