Bootstrap CSS响应式表格排版问题：双表格并排右侧溢出失效

问题出在默认的col类会平分容器宽度，右侧表格列数过多时，容器宽度不足以容纳，导致换行。通过以下调整可实现双表并排+右侧水平滚动：

修改要点 #

• 左侧列用col-auto，让宽度自适应表格内容，避免占用多余空间
• 右侧容器强制启用水平滚动，确保宽表格不会撑破布局换行

修改后的完整代码 #

<div class="container-fluid bg-secondary">
  <div class="text-center">
    <h3 class="text-light mx-auto pt-3">Data Acquisitions</h3>
  </div>
  <div class="row g-0">
    <!-- 左侧表格：自适应宽度 -->
    <div class="col-auto">
      <div class="table-responsive mx-3" style="height: 300px;">
        <table
          id="amp-table-head"
          class="table table-striped table-dark table-hover table-sm my-3"
        >
          <thead>
            <tr>
              <script>
                var headers = ["OP Code", "Index", "Date", "Time", "Run", "Point"];
                for (i = 0; i < headers.length; i++) {
                  document.write('<th scope="col">' + headers[i] + "</th>");
                }
              </script>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <!-- 右侧表格：占剩余空间+水平滚动 -->
    <div class="col">
      <div class="mx-3" style="height: 300px; overflow-x: auto;">
        <table
          id="amp-table-data"
          class="table table-striped table-dark table-hover table-sm my-3"
        >
          <thead>
            <tr>
              <script>
                var headers = ["Mindex", "NRi", "Qi", "Pi", "H", "TO", "ALPHAC", "PSIC", "PHIC", "ALPHAA", 
                "BETAA", "Phi-A", "Phi-f", "NF 1", "PM 1", "SF 1", "YM 1", "RM 1", "AF 1", "ALP DVM", "PR1", 
                "PR2", "Dew pt", "Tref", "Delta-R", "Baro", "PBJ", "THERMO", "CHAN96", "sense 96"  ];

                for (i = 0; i < headers.length; i++) {
                  document.write('<th scope="col">' + headers[i] + "</th>");
                }
              </script>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

1. col-auto替代col：左侧列宽度完全由表格内容决定，不再和右侧平分空间，保证右侧有足够区域容纳宽表格。
2. 自定义滚动容器：移除右侧的table-responsive类（避免默认样式冲突），直接给容器设置overflow-x: auto，保留垂直固定高度。
3. 移除表格内边距：删掉表格的px-3类，防止额外内边距增加表格宽度，确保滚动区域准确。

修改后两个表格会稳定并排，右侧表格超出容器宽度时自动显示水平滚动条，不会挤到左侧下方。

内容的提问来源于stack exchange，提问作者Camron J Walsh