如何让基于Div的响应式Table保持单元格高度一致？

问题出在桌面端嵌套的table-row/table-cell布局下，当单元格内容换行后，同级单元格无法自动同步高度，导致布局错乱。改用Flexbox布局可以轻松实现行内所有单元格高度统一，同时保留原有响应式特性。

修改后的CSS代码 #

.table {
  display: table;
  text-align: center;
  width: 60%;
  margin: 10% auto 0;
  border-collapse: separate;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* 替换table-row为flex，实现单元格等高 */
.table_row {
  display: flex;
}

.theader {
  display: table-row;
}

.table_header {
  display: table-cell;
  border-bottom: #ccc 1px solid;
  border-top: #ccc 1px solid;
  background: #bdbdbd;
  color: #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
}

.table_header:first-child {
  border-left: #ccc 1px solid;
  border-top-left-radius: 5px;
}

.table_header:last-child {
  border-right: #ccc 1px solid;
  border-top-right-radius: 5px;
}

/* 给每个table_small设置flex:1，平分宽度并自动等高 */
.table_small {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table_row>.table_small>.table_cell:nth-child(odd) {
  display: none;
  background: #bdbdbd;
  color: #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table_row>.table_small>.table_cell {
  flex: 1;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #5b5b5b;
  border-bottom: #ccc 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 调整边框逻辑，适配flex布局 */
.table_row>.table_small:first-child>.table_cell {
  border-left: #ccc 1px solid;
}

.table_row>.table_small:last-child>.table_cell {
  border-right: #ccc 1px solid;
}

.table_row:last-child>.table_small:last-child>.table_cell:last-child {
  border-bottom-right-radius: 5px;
}

.table_row:last-child>.table_small:first-child>.table_cell:last-child {
  border-bottom-left-radius: 5px;
}

.table_row:nth-child(2n+3) {
  background: #e9e9e9;
}

@media screen and (max-width: 900px) {
  .table {
    width: 90%
  }
}

@media screen and (max-width: 650px) {
  .table {
    display: block;
  }
  .table_row:nth-child(2n+3) {
    background: none;
  }
  .theader {
    display: none;
  }
  .table_row>.table_small>.table_cell:nth-child(odd) {
    display: table-cell;
    width: 50%;
  }
  .table_cell {
    display: table-cell;
    width: 50%;
    align-items: unset;
    justify-content: unset;
  }
  .table_row {
    display: table;
    width: 100%;
    border-collapse: separate;
    padding-bottom: 20px;
    margin: 5% auto 0;
    text-align: center;
  }
  .table_small {
    display: table-row;
    flex: unset;
    flex-direction: unset;
  }
  .table_row>.table_small:first-child>.table_cell:last-child {
    border-left: none;
  }
  .table_row>.table_small>.table_cell:first-child {
    border-left: #ccc 1px solid;
  }
  .table_row>.table_small:first-child>.table_cell:first-child {
    border-top-left-radius: 5px;
    border-top: #ccc 1px solid;
  }
  .table_row>.table_small:first-child>.table_cell:last-child {
    border-top-right-radius: 5px;
    border-top: #ccc 1px solid;
  }
  .table_row>.table_small:last-child>.table_cell:first-child {
    border-right: none;
  }
  .table_row>.table_small>.table_cell:last-child {
    border-right: #ccc 1px solid;
  }
  .table_row>.table_small:last-child>.table_cell:first-child {
    border-bottom-left-radius: 5px;
  }
  .table_row>.table_small:last-child>.table_cell:last-child {
    border-bottom-right-radius: 5px;
  }
}

修改说明 #

1. 桌面端布局重构：将.table_row改为display:flex，.table_small设置flex:1，让每个单元格自动平分宽度并同步高度；给.table_cell添加Flex布局属性，确保内容垂直居中。
2. 响应式兼容：移动端的table布局逻辑完全保留，仅在桌面端替换为Flexbox，不影响小屏幕下的展示效果。
3. 边框适配：调整边框样式规则，确保Flexbox布局下边框和圆角的显示逻辑与原设计一致。

HTML代码无需修改，直接使用原代码即可。

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