如何使用 CSS 将行转换为列？

Question

我正在 Ionic3 框架中开发一个 Web 应用程序。在我的表格中，每个项目都有不同的尺寸。在移动设备上，屏幕太窄，无法正确显示最多 4 个不同尺寸的项目。

所以我想仅在移动视图中将行转换为列。

我们以这个例子为例

输入-

x1 | x2 | x3 | x4 | x5

y1 | y2 | y3 | y4 | y5

z1 | z2 | z3 | z4 | z5

输出-

x1 | y1 | z1

x2 | y2 | z2

x3 | y3 | z3

x4 | y4 | z4

x5 | y5 | z5

有没有办法在 CSS 中做到这一点？

Answer 1

您可以使用display: flex.

@media screen and (max-width: 500px) {
  tr {
    display: inline-flex;
    flex-direction: column;
  }
}

<table>
  <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>
</table>