基于Bootstrap创建横向HTML表格及响应式布局实现咨询

这个需求我经常遇到，用 Bootstrap 就能完美解决，完全满足响应式和排版要求！我给你整理了通用的实现方案，附代码和细节说明：

1. 响应式布局框架（图片+行式表格） #

用 Bootstrap 的网格系统搭建基础框架，大屏幕下分成左右两栏（表格区+图片区），小屏幕自动堆叠成上下布局，图片占满整行。关键是用 col-md-6 这类断点类，精准控制不同屏幕下的列宽度。

2. 行式“表格”的实现 #

不用传统 <table>，用 <div> 模拟行结构，每行的第一个元素作为“表头”（用加粗样式区分）。为了排版整洁，推荐用 Bootstrap 的 d-flex 弹性布局类，或者 row+col 拆分表头和内容区，确保小屏幕下自动换行也能保持整洁。

3. 图片对齐与自适应 #

给图片加 img-fluid 类确保它能自适应容器宽度，同时通过主容器的对齐类（比如 align-items-start）让图片和左侧表格区在垂直方向对齐，大屏幕下视觉更统一。

<!-- 先确保引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
/* 自定义表头宽度类，Bootstrap 默认没有这个类 */
.w-30 {
  width: 30%;
}
</style>

<div class="container my-4">
  <!-- 主容器：大屏幕左右分栏，小屏幕堆叠 -->
  <div class="row g-4 align-items-start">
    <!-- 左侧行式表格区 -->
    <div class="col-md-6">
      <!-- 每个条目都是一行 -->
      <div class="d-flex border-bottom py-3">
        <div class="fw-bold w-30">产品名称</div>
        <div class="flex-grow-1">XX无线降噪耳机</div>
      </div>
      <div class="d-flex border-bottom py-3">
        <div class="fw-bold w-30">上市时间</div>
        <div class="flex-grow-1">2024年3月</div>
      </div>
      <div class="d-flex border-bottom py-3">
        <div class="fw-bold w-30">续航时长</div>
        <div class="flex-grow-1">单次8小时，充电盒补能32小时</div>
      </div>
      <div class="d-flex py-3">
        <div class="fw-bold w-30">官方售价</div>
        <div class="flex-grow-1">¥299</div>
      </div>
    </div>

    <!-- 右侧图片区 -->
    <div class="col-md-6">
      <img src="你的产品图片URL" alt="产品展示图" class="img-fluid rounded shadow-sm">
    </div>
  </div>
</div>

• 响应式断点：col-md-6 表示在中等屏幕（≥768px）及以上，两栏各占一半宽度；小屏幕下自动变成100%宽度，图片会跑到表格下方占满整行，完全符合你的需求。
• 行式表格排版：d-flex 让表头和内容在同一行排列，w-30 自定义类固定表头宽度，确保所有表头对齐；flex-grow-1 让内容区自动填充剩余空间，避免内容过长时排版混乱。
• 对齐优化：主 row 加 align-items-start 让两栏顶部对齐；如果想让图片和表格高度匹配，可以换成 align-items-stretch，再给图片容器加 d-flex 和 align-items-center 让图片垂直居中。
• 样式美化：py-3 给每行上下间距，border-bottom 做分隔线，shadow-sm 给图片加轻微阴影，提升整体视觉质感。

不管用不用 Bootstrap，通用思路都是：

1. 用**弹性布局（Flexbox）或者网格布局（Grid）**做响应式容器，控制不同屏幕下的列展示方式。
2. 行式结构用块级元素模拟，给表头固定宽度或占比，确保排版整齐。
3. 图片用 max-width: 100%; height: auto; 实现自适应，和左侧内容区用容器的对齐属性（比如 align-items）控制垂直对齐。

这个方案完全通用，在所有分辨率下都能保持整洁的排版~

内容的提问来源于stack exchange，提问作者i.brod