响应式流体属性表格（Responsive fluid property table）HTML实现：同一布局适配桌面与移动端的最佳方案咨询

嘿，这个需求用CSS Grid配合媒体查询就能完美解决，而且能彻底搞定你之前Flexbox遇到的单元格高度不一致问题！核心思路是用二维的Grid布局替代一维的Flexbox，因为Grid天然支持行与列的对齐，能自动让同一行的所有单元格高度保持一致，完全不用额外处理。

步骤1：复用的HTML结构 #

我们把两个产品的属性组放在同一个容器里，每个产品的属性和值都封装在独立的product-group中，这样既保证了结构复用，又方便CSS在不同屏幕下调整布局：

<div class="product-comparison">
  <!-- 产品1属性组 -->
  <div class="product-group product-1">
    <div class="property-row header">
      <div class="property">Product1 Property</div>
      <div class="value">Value</div>
    </div>
    <div class="property-row">
      <div class="property">Weight</div>
      <div class="value">1.5kg</div>
    </div>
    <div class="property-row">
      <div class="property">Description<br>Multi-line text here</div>
      <div class="value">Lorem ipsum dolor sit amet</div>
    </div>
  </div>

  <!-- 产品2属性组 -->
  <div class="product-group product-2">
    <div class="property-row header">
      <div class="property">Product2 Property</div>
      <div class="value">Value</div>
    </div>
    <div class="property-row">
      <div class="property">Weight</div>
      <div class="value">2.0kg</div>
    </div>
    <div class="property-row">
      <div class="property">Description</div>
      <div class="value">Short description</div>
    </div>
  </div>
</div>

步骤2：基础CSS样式 #

先设置通用样式，模拟表格的边框、内边距等视觉效果：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.product-comparison {
  width: 100%; /* 全局宽度100% */
}

.product-group {
  width: 100%;
}

.property-row {
  display: grid;
  border-bottom: 1px solid #ddd; /* 行底部边框 */
}

/* 表头样式 */
.property-row.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

.property, .value {
  padding: 12px;
  border-right: 1px solid #ddd; /* 列右侧边框 */
}

.value {
  border-right: none; /* 最后一列去掉右侧边框 */
}

步骤3：桌面端布局（≥768px） #

用Grid把两个产品组并排展示，利用Grid的自动行高对齐特性，确保同一行的所有单元格高度一致：

@media (min-width: 768px) {
  .product-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两个产品组各占50%宽度 */
    border: 1px solid #ddd; /* 外层大边框，模拟合并表格 */
  }

  .product-group {
    border-right: 1px solid #ddd; /* 两个产品组之间的分隔线 */
  }

  .product-group:last-child {
    border-right: none; /* 去掉最后一个产品组的右侧边框 */
  }

  /* 每个属性行分成两列：属性名+值 */
  .property-row {
    grid-template-columns: 1fr 1fr;
  }

  /* 关键：Grid会自动让同一行的所有property-row高度一致，
     哪怕某一行有单元格是多行文本，整行都会拉伸适配 */
}

步骤4：移动端布局（<768px） #

把两个产品组垂直堆叠，变成独立的两个表格：

@media (max-width: 767px) {
  .product-comparison {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 两个表格之间的间距 */
  }

  .product-group {
    border: 1px solid #ddd; /* 每个产品组加上独立边框 */
  }

  .property-row {
    grid-template-columns: 1fr 1fr; /* 保持属性名+值的两列布局 */
  }
}

为什么这个方案比Flexbox好？ #

Flexbox是一维布局，虽然可以设置align-items: stretch，但如果是嵌套的Flex容器，很容易出现子元素高度无法同步的问题。而CSS Grid是二维布局，天然支持行与列的对齐，只要把两个产品组放在同一个Grid容器中，同一行的所有网格项（也就是对应的属性行）会自动继承最高单元格的高度，完美解决你遇到的高度不一致问题。

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