如何使含两个div与可变列数table的容器实现单行横向滚动？

我来帮你搞定这个布局需求！你遇到的核心问题是传统float布局难以同时实现同行排列和表格宽度由单元格决定且不收缩，而Flexbox布局正好能完美解决这个问题，不需要硬编码负margin或者用绝对定位。

具体实现步骤： #

• 修改容器的布局方式：把容器的float布局换成display: flex，这样内部元素默认会在同一行排列，同时保留overflow: auto来实现横向滚动。
• 控制表格不收缩：给表格添加flex-shrink: 0，确保它不会因为容器宽度不足而被压缩，保持单元格决定的宽度。
• 移除不必要的表格样式：去掉之前设置的width: 100%和table-layout: fixed，让表格自然根据单元格宽度计算自身宽度。

完整代码示例： #

HTML：

<div class="container">
  <div class="first-row"> test </div>
  <div class="second-row"> test </div>
  <table>
    <tr>
      <td>test</td>
      <td>test2</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test2</td>
    </tr>
  </table>
</div>

CSS：

.container {
  width: 300px;
  background-color: red;
  overflow: auto;
  display: flex; /* 启用Flex布局 */
  align-items: flex-start; /* 让元素顶部对齐，避免高度不一致时错位 */
}

.first-row, .second-row {
  padding: 0 10px;
  background-color: #ddd;
  margin-right: 10px;
}

table {
  flex-shrink: 0; /* 禁止表格被压缩 */
  border-collapse: collapse; /* 可选，让表格边框合并更美观 */
}

table td {
  background-color: white;
  width: 200px;
  padding: 5px;
}

为什么这个方案有效？ #

• Flex布局默认让子元素在同一行排列，不会像float那样因为元素总宽度超过容器而换行（除非显式设置换行）。
• flex-shrink: 0确保表格不会被Flex容器压缩，始终保持由单元格宽度计算出的总宽度。
• align-items: flex-start保证两个div和表格顶部对齐，即使它们的高度不同也不会出现错位问题，完全避免了你担心的“前两个元素高度变化失效”的情况。

这样就能完美实现你想要的效果：三个元素在同一行，表格宽度由单元格决定，容器宽度不足时可以横向滚动，而且不需要硬编码任何固定值。

内容的提问来源于stack exchange，提问作者papibat