tableで1行に4つあるセルを、レスポンシブで2つのセル×2行表示にしたい

Question

tableのレスポンシブ対応についてです。
セルをブロック化してwidth:100%を設定し、すべてのセルを一行づつ表示する方法が一般的だと思うのですが…

以下のコードのように、例えば一行のtr内に4つのセル(td)がある場合

<table>
 <tr>
  <td>cell-1</td>
  <td>cell-2</td>
  <td>cell-3</td>
  <td>cell-4</td>
 </tr>
</table>

cell-1とcell-2を一行目に、
cell-3とcell-4を二行目にといった具合にうまく表示する方法は何かないでしょうか。

tableにwidth:100%を設定、それぞれのセルをブロック要素かしてwidth50%、floatなども設定してみましたがうまくいきませんでした。

既存のシステムのタグをカスタマイズしているため、HTMLでテーブルの構造自体を変更することができません。
CSSでどうにか調整可能な方法をご存知の方がいらっしゃいましたら、ご教授頂けますと幸いです。

宜しくお願い致します。

Answer 1

@media screen and (max-width: 720px) {
  tr {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

Comments

[isobel]

<tr>にdisplay:gridとgrid-template-columnsを設置したろころうまくいきました！
本当に助かりました、ありがとうございます！