テーブルレイアウトのcssについて

Question

お疲れさまです。

以下のレイアウトを組みたいのですが、知見不足で詰まっています。

具体的にわからない点はPC版のレイアウトで４行目から２カラム目に持ってくる方法です。
モバイル版は通常通り並べれば可能ですが、PC版がうまくいきません、、
なお、thとtdはfor構文で繰り返し出力するロジックを想定しています。

PC：

モバイル：

もしわかる方いらっしゃればご教示ください。

Answer 1

column-count: 2;で出来ないことはなかったですけど
border-collapse: collapse;が効かなくなったりしますね。

table
  - for (var i = 0; i < 5; i++)
    tr
      th th#{i}
      td tdダミーテキスト#{i}

table {
  column-count: 2;
  display: inline-block;
  border-collapse: collapse;
}
tr {
  display: inline-block;
  width: 100%;
}
th,
td {
  border: 1px solid tomato;
}
td {
  width: 100%;
}

1列に戻したい場合はメディアクエリで解除してください。

サンプル

Comments

[onks]

culumn-countとdisplay:inline-block;で実現きることを学べました。

ご教示いただき誠にありがとうございます。