如何让 元素在表格单元格中尊重列宽并显示水平滚动条

元素在表格单元格中尊重列宽并显示水平滚动条 " /> 元素在表格单元格中尊重列宽并显示水平滚动条 " />

在响应式表格中，当 `

` 内容超长时，默认会撑开列宽；通过设置 `table-layout: fixed` 并配合 `white-space: pre; overflow-x: auto; width: 100%;`，可强制 `
` 严格遵循列宽约束并启用横向滚动。
要在表格单元格（尤其是弹性宽度列）中让 
 元素既不换行、也不破坏布局，同时提供水平滚动能力，关键在于控制表格的尺寸计算模型。默认情况下，浏览器使用 table-layout: auto，它会根据内容动态计算列宽——这正是导致 
 撑开整列、无视 max-width 和 col 宽度声明的根本原因。
✅ 正确解法：为 
 显式设置  
.table {
  table-layout: fixed;
}
table-layout: fixed 启用固定表布局算法：列宽完全由 
、或第一行 ）定义，因此务必确保 正确声明（如示例中的 外层有 
，建议为其添加 min-width: 0;（防止 flex/table 子项最小尺寸限制失效）；
Bootstrap 的 .table-responsive 类对 
 
 的宽度决定，后续单元格内容不再影响列宽。此时，你才能真正让 
 尊重父容器（即该列）的可用宽度。
? 配套 CSS（需作用于 
 或其直接容器）：

							

								
								

									Manus
									
全球首款通用型AI Agent，可以将你的想法转化为行动。
								
								下载 
							
						
pre {
  white-space: pre;           /* 禁止换行，保留原始空格与缩进 */
  overflow-x: auto;           /* 超出时显示横向滚动条 */
  width: 100%;                /* 填满父 td 的可用宽度（在 fixed 布局下生效） */
  margin: 0;                  /* 清除默认上下边距，避免高度异常 */
  box-sizing: border-box;     /* 确保 padding 不溢出 width */
}
⚠️ 注意事项：
table-layout: fixed 会使所有列宽由第一行（或 
  
 本身无 overflow 作用，它仅包裹外层 
；本场景中应移除或确保不干扰内部 overflow-x；
避免同时使用 white-space: pre-wrap（换行）和 overflow-x: auto（滚动），二者语义冲突；只需 pre + auto 即可满足“不换行+可滚动”。
? 完整修复示例（仅需补充以下两处）：

/* 全局预设（推荐） */
.table {
  table-layout: fixed;
}

.table td > div > pre {
  white-space: pre;
  overflow-x: auto;
  width: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  background-color: #1E1E1E;
  color: #DADADA;
}
这样，无论 
 内容多长，它都严格限制在第二列的动态计算宽度内，并在超出时优雅地显示横向滚动条——完美兼顾布局稳定性与内容可读性。