表格弹性列中<pre>元素宽度约束失效的解决问询

块横向滚动的解决方案 #

问题场景 #

需要实现一个居中展示、最大宽度1024px的表格：

• 第一列固定宽度100px，第二列自动占用剩余宽度

• 块需在列宽范围内显示，文本超出时不换行、不撑宽表格，仅显示横向滚动条
  

直接给

加overflow-x: auto和white-space: nowrap会导致
撑宽表格列，忽略最大宽度约束，且固定宽度方案不符合弹性列需求。
解决代码 #
HTML结构
<div class="table-container">
  <table>
    <tr>
      <td class="fixed-column">固定列</td>
      <td class="flex-column">
        <div class="pre-outer">
          <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
        </div>
      </td>
    </tr>
    <tr>
      <td class="fixed-column">固定列</td>
      <td class="flex-column">
        <div class="pre-outer">
          <pre>短文本示例</pre>
        </div>
      </td>
    </tr>
  </table>
</div>
CSS样式
.table-container {
  max-width: 1024px;
  margin: 0 auto;
}

table {
  width: 100%;
  table-layout: fixed; /* 关键：强制表格按设定列宽布局，不受内容影响 */
  border-collapse: collapse;
}

.fixed-column {
  width: 100px;
  border: 1px solid #ddd;
}

.flex-column {
  width: 100%; /* 自动填充表格剩余宽度 */
  border: 1px solid #ddd;
}

.pre-outer {
  overflow-x: auto; /* 超出显示横向滚动条 */
  width: 100%; /* 继承列宽，限制<pre>的可用宽度 */
}

pre {
  white-space: nowrap; /* 禁止文本换行 */
  margin: 0; /* 清除<pre>默认外边距，避免容器出现不必要的滚动 */
}
关键原理说明 #
table-layout: fixed：让表格优先使用定义的列宽规则，不会被单元格内的长内容撑开，确保第二列的弹性宽度始终受限于表格的最大宽度（1024px）。
.pre-outer容器：通过width: 100%继承列的宽度，再用overflow-x: auto实现超出滚动，把
的宽度限制在列宽范围内。
white-space: nowrap：强制
内的文本不换行，触发容器的横向滚动条。
内容的提问来源于stack exchange，提问作者Christoph Mett