有没有办法用纯CSS将行内容变成列？

Question

我有一张这样的桌子：

<p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
    <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>

有没有办法纯粹用CSS修改成LOOK这样？ （单列，其中每个奇数项都来自第一行，每个偶数项来自第二行）

<p>On small screens</p>

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>

我尝试使用

display: contents;

但显然，由于某种原因它不适用于

<tr>

-s。关于我应该如何处理这个问题有什么想法吗？另外，我只能使用纯 (S)CSS。行数和列数是动态的。

Answer 1

使用 CSS 网格，如下所示

table {
  display: grid;
}

table > *, /* you need to target the "tbody" as well as "tr" */
table tr {
  display: contents;
}

td:nth-child(1) {order:1}
td:nth-child(2) {order:2}
td:nth-child(3) {order:3}

<p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
    <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>