如何在HTML中实现两表格水平同行且移动端垂直堆叠

嘿，这个响应式布局需求其实很常见，用CSS的Flexbox或者Grid都能轻松实现，我给你两种主流方案，你可以根据项目场景选：

方案一：Flexbox 实现（最常用，兼容性好） #

这种方式通过Flex布局控制表格的排列方向，在移动端切换为垂直堆叠，逻辑清晰易懂。

HTML 结构

<div class="table-wrapper">
  <!-- 左侧普通表格 -->
  <table class="custom-table">
    <thead>
      <tr>
        <th>商品名称</th>
        <th>库存数量</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>无线耳机</td>
        <td>120</td>
      </tr>
      <tr>
        <td>智能手表</td>
        <td>85</td>
      </tr>
    </tbody>
  </table>

  <!-- 带图片的右侧表格 -->
  <table class="custom-table">
    <thead>
      <tr>
        <th>商品预览</th>
        <th>商品描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="your-product-image.jpg" alt="无线耳机预览" class="table-img"></td>
        <td>主动降噪，续航24小时</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 样式

/* 父容器设置Flex布局，默认水平排列表格 */
.table-wrapper {
  display: flex;
  gap: 2rem; /* 两个表格之间的间距，可按需调整 */
  padding: 1rem;
  flex-wrap: wrap; /* 极端小屏幕下自动换行，避免内容溢出 */
}

/* 表格基础样式，优化视觉效果 */
.custom-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px; /* 限制表格最大宽度，可选 */
  border: 1px solid #eee;
}

.custom-table th,
.custom-table td {
  padding: 0.8rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

/* 表格内图片设置响应式，防止溢出单元格 */
.table-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 媒体查询：移动端屏幕下切换为垂直堆叠 */
@media (max-width: 768px) {
  .table-wrapper {
    flex-direction: column;
  }

  .custom-table {
    max-width: 100%; /* 移动端表格占满容器宽度 */
  }

  /* 可选：如果表格内容过宽，添加横向滚动 */
  .custom-table {
    overflow-x: auto;
    display: block;
  }
}

方案二：CSS Grid 实现（更简洁的网格布局） #

Grid布局可以自动适配屏幕宽度，当空间不足时自动切换为单列，甚至不用额外写媒体查询（也可手动控制断点）。

CSS 样式（HTML结构和方案一一致）

.table-wrapper {
  display: grid;
  /* 自适应列宽：最小300px，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

/* 表格和图片样式和方案一相同，这里省略重复代码 */
.custom-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #eee;
}

.table-img {
  max-width: 100%;
  height: auto;
  display: block;
}

小提示 #

• 你可以根据设计需求调整媒体查询的断点（比如把768px改成375px适配手机）、间距、表格边框样式等细节。
• 如果表格内容较多，建议保留移动端的横向滚动逻辑，避免内容挤压变形。

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