如何用CSS和HTML实现响应式表格：550px时1行4列转2行2列且无重复内容

核心思路 #

不用重复内容，直接通过CSS Grid或媒体查询调整布局规则，就能实现屏幕尺寸切换时的行列变化，下面给两种可行方案：

方案一：用CSS Grid实现（推荐，更灵活） #

这种方式不需要依赖table标签，用普通div就能模拟表格布局，适配性更强。

HTML代码 #

<div class="grid-table">
  <div class="grid-cell">内容1</div>
  <div class="grid-cell">内容2</div>
  <div class="grid-cell">内容3</div>
  <div class="grid-cell">内容4</div>
</div>

CSS代码 #

/* 大屏幕（>550px）：1行4列 */
.grid-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
  gap: 8px; /* 单元格之间的间距，可根据需求调整 */
  width: 100%;
}

.grid-cell {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f9f9f9;
}

/* 小屏幕（≤550px）：自动转为2行2列 */
@media (max-width: 550px) {
  .grid-table {
    grid-template-columns: repeat(2, 1fr); /* 改为2列等宽 */
  }
}

方案二：用原生table标签实现 #

如果必须使用table标签，也可以通过媒体查询调整单元格的显示方式：

HTML代码 #

<table class="responsive-table">
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
</table>

CSS代码 #

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

/* 大屏幕：每列占25%，1行4列 */
.responsive-table td {
  width: 25%;
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
}

/* 小屏幕：改为每列50%，自动换行成2行2列 */
@media (max-width: 550px) {
  .responsive-table td {
    width: 50%;
    display: inline-block;
    box-sizing: border-box; /* 避免padding撑大单元格宽度 */
  }
}

这两种方案都只需要写一遍内容，完全不需要重复代码，通过CSS的布局规则和媒体查询就能实现响应式切换。

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