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

元素在表格单元格中尊重列宽并显示水平滚动条
" /> 元素在表格单元格中尊重列宽并显示水平滚动条
" /></p> </p><p>在响应式表格中，当 `<pre class="brush:php;toolbar:false;">` 内容超长时，默认会撑开列宽；通过设置 `table-layout: fixed` 并配合 `white-space: pre; overflow-x: auto; width: 100%;`，可强制 `<pre class="brush:php;toolbar:false;">` 严格遵循列宽约束并启用横向滚动。</p><p>要在表格单元格（尤其是弹性宽度列）中让 <pre class="brush:php;toolbar:false;"> 元素既不换行、也不破坏布局，同时提供水平滚动能力，关键在于<strong>控制表格的尺寸计算模型</strong>。默认情况下，浏览器使用 table-layout: auto，它会根据内容动态计算列宽——这正是导致 <pre class="brush:php;toolbar:false;"> 撑开整列、无视 max-width 和 col 宽度声明的根本原因。</p><p>✅ 正确解法：为 <table> 显式设置 </p><pre class="brush:php;toolbar:false;">.table {
table-layout: fixed;
}

table-layout: fixed 启用固定表布局算法：列宽完全由

 尊重父容器（即该列）的可用宽度。</p><p>? 配套 CSS（需作用于 <pre class="brush:php;toolbar:false;"> 或其直接容器）：</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2619" title="上班人导航"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/246/273/176907492092780.png" alt="上班人导航"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2619" title="上班人导航">上班人导航</a>
                                                                        <p>上班人必备的职场办公导航网站</p>
                                                                </div>
                                                                <a href="/ai/2619" title="上班人导航" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><pre class="brush:php;toolbar:false;">pre {
  white-space: pre;           /* 禁止换行，保留原始空格与缩进 */
  overflow-x: auto;           /* 超出时显示横向滚动条 */
  width: 100%;                /* 填满父 td 的可用宽度（在 fixed 布局下生效） */
  margin: 0;                  /* 清除默认上下边距，避免高度异常 */
  box-sizing: border-box;     /* 确保 padding 不溢出 width */
}

⚠️ 注意事项：

• table-layout: fixed 会使所有列宽由第一行（或
  ）定义，因此务必确保
  正确声明（如示例中的
  和
  ），且第一行
  不缺失或含干扰性宽内容；

• 若

   外层有 <div class="my-div">，建议为其添加 min-width: 0;（防止 flex/table 子项最小尺寸限制失效）；</li><li>Bootstrap 的 .table-responsive 类对 <table> 本身无 overflow 作用，它仅包裹外层 <div>；本场景中应移除或确保不干扰内部 overflow-x；</li><li>避免同时使用 white-space: pre-wrap（换行）和 overflow-x: auto（滚动），二者语义冲突；只需 pre + auto 即可满足“不换行+可滚动”。</li></ul><p>? 完整修复示例（仅需补充以下两处）：</p><pre class="brush:php;toolbar:false;"><!-- 在 table 标签上添加 -->
  <table class="table table-striped mx-auto mt-3" style="max-width: 1024px; table-layout: fixed;">
    <colgroup>
      <col style="width: 100px;" />
      <col /> <!-- 此列将自动占满剩余空间（受 fixed 布局约束） -->
    </colgroup>
    <!-- ...其余结构不变 -->
  </table>

  /* 全局预设（推荐） */
  .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;
  }

  这样，无论

   内容多长，它都严格限制在第二列的动态计算宽度内，并在超出时优雅地显示横向滚动条——完美兼顾布局稳定性与内容可读性。