如何使用CSS实现表格行列转换以适配Ionic3移动端窄屏场景

仅通过CSS完全可以实现你要求的移动端表格行列转置效果，不需要额外编写JS逻辑，完全适配Ionic3的响应式开发场景。

实现原理 #

核心借助CSS Grid布局+媒体查询，在移动端视图下修改表格默认的流式布局规则，将原有按行排列的单元格转为按列排列，自动完成行列转置。该方案兼容Ionic3支持的所有移动端浏览器（iOS 9+、Android 5+），无需额外兼容前缀。

代码示例 #

示例HTML结构 #

<table class="size-spec-table">
  <tbody>
    <!-- 原表格每行对应一种尺寸规格 -->
    <tr>
      <td>x1</td>
      <td>x2</td>
      <td>x3</td>
      <td>x4</td>
      <td>x5</td>
    </tr>
    <tr>
      <td>y1</td>
      <td>y2</td>
      <td>y3</td>
      <td>y4</td>
      <td>y5</td>
    </tr>
    <tr>
      <td>z1</td>
      <td>z2</td>
      <td>z3</td>
      <td>z4</td>
      <td>z5</td>
    </tr>
  </tbody>
</table>

响应式CSS代码 #

/* 桌面端默认表格样式，可保留原有业务样式 */
.size-spec-table {
  width: 100%;
  border-collapse: collapse;
}
.size-spec-table td {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
}

/* 移动端断点，可根据实际业务需求调整阈值，Ionic默认移动端断点为576px */
@media only screen and (max-width: 576px) {
  .size-spec-table tbody {
    display: grid;
    /* 列数等于原表格的行数，最多4种尺寸可直接设为repeat(4, 1fr) */
    grid-template-columns: repeat(3, 1fr);
    /* 按列填充单元格，自动生成对应行数 */
    grid-auto-flow: column;
  }
  .size-spec-table tr {
    /* 消除原有行的布局包裹，让单元格直接参与grid排列 */
    display: contents;
  }
}

注意事项 #

• 如果表格包含表头<th>，将<th>和<td>做同等样式处理即可，也可单独加样式区分表头样式
• 如果需要适配最多4种尺寸的场景，直接把grid-template-columns的参数改为repeat(4, 1fr)即可
• 可根据业务需求调整断点阈值、单元格内边距、边框等样式，不影响转置逻辑

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