如何让div内的两个HTML表格在页面缩放时始终并排显示？

嘿，这个问题我碰到过好多次了！要让两个表格不管窗口怎么缩放都保持并排状态，其实有几种实用的CSS方案，我给你详细说说：

Flexbox是现在处理这类横向排列布局最顺手的工具，只要给父div加个flex属性，就能轻松搞定：

<div class="table-wrapper">
  <table class="inline-table">
    <!-- 你的表格内容 -->
  </table>
  <table class="inline-table">
    <!-- 你的表格内容 -->
  </table>
</div>

<style>
.table-wrapper {
  display: flex;
  /* 当窗口宽度不够时，显示横向滚动条，避免表格挤到下方 */
  overflow-x: auto;
}

.inline-table {
  /* 让两个表格平分父容器宽度，也可以换成固定宽度比如300px */
  flex: 1;
  /* 设置最小宽度，防止窗口过小导致表格内容挤压变形 */
  min-width: 300px;
  /* 给表格之间加个间距，看着更舒服 */
  margin-right: 1rem;
}

/* 去掉最后一个表格的右边距 */
.inline-table:last-child {
  margin-right: 0;
}
</style>

Flex布局会默认让子元素在一行排列，加上overflow-x:auto后，当窗口宽度小于两个表格的最小宽度总和时，会出现横向滚动条，保证表格始终并排。如果想要表格固定宽度，把flex:1换成width: 400px这类固定值就行。

Grid布局也很适合这种两列并排的场景，定义列规则后就能自动排列：

<div class="table-wrapper">
  <table class="inline-table">
    <!-- 你的表格内容 -->
  </table>
  <table class="inline-table">
    <!-- 你的表格内容 -->
  </table>
</div>

<style>
.table-wrapper {
  display: grid;
  /* 定义两列，每列宽度平分，也可以写成固定宽度比如300px 300px */
  grid-template-columns: 1fr 1fr;
  /* 列之间的间距 */
  gap: 1rem;
  overflow-x: auto;
}

.inline-table {
  min-width: 300px;
}
</style>

grid-template-columns直接指定了两列的宽度规则，gap用来设置表格之间的间距，同样用overflow-x:auto处理小窗口的情况，逻辑清晰易懂。

如果需要兼容IE9这类老浏览器，可以用inline-block，但要注意处理元素间的空白问题：

<!-- 注意：两个表格之间不能有换行或空格，否则会多出不必要的间距 -->
<div class="table-wrapper">
  <table class="inline-table"><!-- 你的表格内容 --></table><table class="inline-table"><!-- 你的表格内容 --></table>
</div>

<style>
.table-wrapper {
  white-space: nowrap; /* 强制子元素不换行 */
  overflow-x: auto;
}

.inline-table {
  display: inline-block;
  width: 50%; /* 或者固定宽度 */
  min-width: 300px;
  box-sizing: border-box; /* 确保宽度包含内边距和边框，避免布局错乱 */
}
</style>

这种方式需要注意表格之间不能有空白字符，否则会出现额外间距，而且灵活性不如前两种方案，所以优先推荐Flex或Grid。

• 一定要给表格设置min-width：不然窗口过小时，表格会被过度压缩，内容挤在一起没法看。
• 父容器加overflow-x:auto：这是保证小窗口下表格不换行的核心，当宽度不够时会出现横向滚动条，保留并排状态。
• 别用float布局：float元素在窗口缩小时很容易自动换行，还要额外处理清除浮动的问题，麻烦又不稳定。

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