响应式Div Grid表格适配问题：移动端布局与桌面端列宽调整

问题分析 #

1. 移动端布局问题：当前每个表格行（.product-info-table-row）内部用两列Grid布局，导致每行显示为|A|1|、|B|2|的分组，不符合“先显示所有|属性名|属性值|组（A-1、AA-11...），再显示另一组（B-2、BB-22...）”的需求。
2. 桌面端列宽问题：使用默认表格布局时，列宽会随内容自适应，无法强制设置为25%等宽。

修改后的完整代码 #

CSS

/* 全局基础样式 */
.product-info-table {
  border: 1px solid #999999;
}

.product-info-table-cell {
  padding: 3px 10px;
  border-bottom: 1px solid #eee; /* 可选，添加行分隔线增强可读性 */
}

/* 移动端布局（<600px） */
@media screen and (max-width: 599px) {
  .product-info-table {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两等分列 */
    --total-rows: 4; /* 表格总行数，扩展时修改此值 */
  }
  .product-info-table-row {
    display: contents; /* 让行内单元格直接成为Grid容器的子元素 */
  }
  /* 第一组属性（A-1、AA-11...）的布局 */
  .product-info-table-row:nth-child(n) .product-info-table-cell:nth-child(1) {
    grid-column: 1;
    grid-row: n;
  }
  .product-info-table-row:nth-child(n) .product-info-table-cell:nth-child(2) {
    grid-column: 2;
    grid-row: n;
  }
  /* 第二组属性（B-2、BB-22...）的布局 */
  .product-info-table-row:nth-child(n) .product-info-table-cell:nth-child(3) {
    grid-column: 1;
    grid-row: calc(var(--total-rows) + n);
  }
  .product-info-table-row:nth-child(n) .product-info-table-cell:nth-child(4) {
    grid-column: 2;
    grid-row: calc(var(--total-rows) + n);
  }
}

/* 桌面端布局（≥600px） */
@media screen and (min-width: 600px) {
  .product-info-table {
    display: table;
    width: 100%;
    table-layout: fixed; /* 固定表格布局，强制列宽按设置生效 */
  }
  .product-info-table-body {
    display: table-row-group;
  }
  .product-info-table-row {
    display: table-row;
  }
  .product-info-table-cell {
    display: table-cell;
    width: 25%; /* 四列等宽，各占25% */
    text-align: left;
  }
}

HTML

<div class="product-info-table">
  <div class="product-info-table-body">
    <div class="product-info-table-row">
      <div class="product-info-table-cell">A</div>
      <div class="product-info-table-cell">1</div>
      <div class="product-info-table-cell">B</div>
      <div class="product-info-table-cell">2</div>
    </div>
    <div class="product-info-table-row">
      <div class="product-info-table-cell">AA</div>
      <div class="product-info-table-cell">11</div>
      <div class="product-info-table-cell">BB</div>
      <div class="product-info-table-cell">22</div>
    </div>
    <div class="product-info-table-row">
      <div class="product-info-table-cell">AAA</div>
      <div class="product-info-table-cell">111</div>
      <div class="product-info-table-cell">BBB</div>
      <div class="product-info-table-cell">222</div>
    </div>
    <div class="product-info-table-row">
      <div class="product-info-table-cell">AAAA</div>
      <div class="product-info-table-cell">1111</div>
      <div class="product-info-table-cell">BBBB</div>
      <div class="product-info-table-cell">2222</div>
    </div>
  </div>
</div>

关键修改说明 #

1. 移动端布局调整：

   • 将整个表格设为Grid容器，使用display: contents让行内单元格直接参与Grid布局，避免每行独立分组。
   • 通过CSS变量--total-rows控制总行数，扩展到6、10行时只需修改该变量值，无需调整其他CSS。
   • 利用nth-child和grid-row定位，将第一组属性（前两个单元格）放在Grid的前N行，第二组属性（后两个单元格）放在N+1到2N行，实现预期的分组显示。

2. 桌面端列宽修复：

   • 添加table-layout: fixed强制表格使用固定布局，此时列宽会严格遵循width:25%的设置，不再随内容自适应。
   • 给每个单元格设置width:25%，确保四列等宽。

扩展说明 #

当需要扩展到6、10行时：

1. 在HTML中添加对应数量的.product-info-table-row行。
2. 修改CSS中--total-rows的值为实际总行数（如6或10）即可，其他样式无需调整。

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