如何用CSS实现适配多设备的三种形态响应式表格布局

实现方案 #

无需编写多套表格结构，仅用一套标准三列表格结构，配合CSS媒体查询、元素display属性重置、data-*自定义属性存储表头信息的方案，即可实现三个布局的自适应切换，后端输出数据也无需额外做适配。 #

第一步：HTML结构改造

仅需给每个<td>添加data-label属性，属性值为对应列的表头文本即可，其余结构保持原有桌面端表格结构不变：

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>Title Column 1</th>
        <th>Title Column 2</th>
        <th>Title Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Title Column 1">Data Column 1 Row 1</td>
        <td data-label="Title Column 2">Data Column 2 Row 1</td>
        <td data-label="Title Column 3">Data Column 3 Row 1</td>
      </tr>
      <tr>
        <td data-label="Title Column 1">Data Column 1 Row 2</td>
        <td data-label="Title Column 2">Data Column 2 Row 2</td>
        <td data-label="Title Column 3">Data Column 3 Row 2</td>
      </tr>
      <tr>
        <td data-label="Title Column 1">Data Column 1 Row 3</td>
        <td data-label="Title Column 2">Data Column 2 Row 3</td>
        <td data-label="Title Column 3">Data Column 3 Row 3</td>
      </tr>
    </tbody>
  </table>
</div>

第二步：完整CSS代码

/* 基础通用样式 */
.s-table-container {
  width: 100%;
  overflow-x: auto;
}
.s-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.s-table th, .s-table td {
  padding: 8px 12px;
  border: 1px solid #eee;
}

/* 桌面端样式：≥1024px，默认表格布局即可满足三列需求 */
@media screen and (min-width: 1024px) {
}

/* 平板端样式：768px ~ 1023px，实现两列键值对布局 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .s-table thead {
    display: none; /* 隐藏原生表头 */
  }
  .s-table tbody, .s-table tr {
    display: block;
    width: 100%;
  }
  .s-table tr {
    margin-bottom: 16px;
    border: 1px solid #eee;
  }
  .s-table td {
    display: table-row;
    width: 100%;
  }
  .s-table td::before {
    display: table-cell;
    width: 50%;
    content: attr(data-label);
    font-weight: bold;
    border-right: 1px solid #eee;
    padding: 8px 12px;
  }
}

/* 移动端样式：<768px，实现单列布局 */
@media screen and (max-width: 767px) {
  .s-table thead {
    display: none; /* 隐藏原生表头 */
  }
  .s-table tbody, .s-table tr, .s-table td {
    display: block;
    width: 100%;
  }
  .s-table tr {
    margin-bottom: 16px;
    border: 1px solid #eee;
  }
  .s-table td::before {
    display: block;
    content: attr(data-label);
    font-weight: bold;
    background: #f5f5f5;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
  }
}

实现逻辑说明

• 桌面端：保留表格默认display属性，正常展示三列表格
• 平板端：隐藏原生表头，将<tr>转为块级元素拆分各行，<td>转为表格行，通过::before伪元素读取data-label的表头内容作为左侧列，原<td>内容作为右侧列，自动拼接为两列键值对布局
• 移动端：将<td>和伪元素都转为块级元素，表头内容单独占一行，数据内容占下一行，实现单列排布

你可以根据实际业务需求调整媒体查询的断点数值，也可以自行添加边框、间距、背景色等样式优化展示效果。

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