如何实现随窗口大小自适应切换布局的HTML动态表格

实现思路 #

不依赖原生表格的默认响应式行为，通过媒体查询+自定义属性+伪元素实现大小屏布局切换，同时保留原生表格的语义化特性。

代码实现 #

HTML 结构 #

给每个td添加data-label属性，值为该单元格对应的表头文本：

<table class="responsive-table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="表头1">单元格内容1</td>
      <td data-label="表头2">单元格内容2</td>
      <td data-label="表头3">单元格内容3</td>
      <td data-label="表头4">操作按钮</td>
    </tr>
    <!-- 更多行结构同上 -->
  </tbody>
</table>

CSS 样式 #

/* 大屏默认样式：正常表格布局 */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}
.responsive-table th,
.responsive-table td {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.responsive-table th {
  background-color: #f3f4f6;
  font-weight: 600;
}

/* 小屏适配：断点可根据设计稿实际尺寸调整，示例为768px */
@media (max-width: 768px) {
  /* 隐藏原有表头 */
  .responsive-table thead {
    display: none;
  }
  /* 每一行转为独立块元素，区分不同数据条目 */
  .responsive-table tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
  }
  /* 单元格转为块级，预留左侧位置放表头标签 */
  .responsive-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
    border: none;
    border-bottom: 1px solid #e5e7eb;
  }
  /* 最后一个单元格不需要底部边框 */
  .responsive-table td:last-child {
    border-bottom: none;
  }
  /* 用伪元素插入表头标签，固定在左侧 */
  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 16px;
    font-weight: 600;
    text-align: left;
  }
}

关键说明 #

• 小屏下每个数据行独立展示，每个单元格左侧会自动显示对应表头，完全匹配设计稿的小屏布局
• 无需编写两套HTML结构，代码复用性高
• 保留了原生table的语义化特性，对屏幕阅读器友好
• 响应式断点768px可根据你的设计稿实际尺寸调整

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