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

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

在响应式表格中，当 `

` 内容超长时，默认会撑开列宽；通过设置 `table-layout: fixed` 并配合 `white-space: pre; overflow-x: auto; width: 100%;`，可强制 `
` 严格遵循列宽约束并启用横向滚动。
要在表格单元格（尤其是弹性宽度列）中让 
 元素既不换行、也不破坏布局，同时提供水平滚动能力，关键在于控制表格的尺寸计算模型。默认情况下，浏览器使用 table-layout: auto，它会根据内容动态计算列宽——这正是导致 
 撑开整列、无视 max-width 和 col 宽度声明的根本原因。
✅ 正确解法：为 
 显式设置  
.table {   table-layout: fixed; }
table-layout: fixed 启用固定表布局算法：列宽完全由 
、
或第一行 
）定义，因此务必确保 
正确声明（如示例中的 
bootstrap 的 .table-responsive 类对 



 
 的宽度决定，后续单元格内容不再影响列宽。此时，你才能真正让 

尊重父容器（即该列）的可用宽度。
? 配套 css（需作用于 
 或其直接容器）：
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; }
这样，无论 
内容多长，它都严格限制在第二列的动态计算宽度内，并在超出时优雅地显示横向滚动条——完美兼顾布局稳定性与内容可读性。