【レスポンシブ】CSSで画面の横幅サイズによってテーブルの構成を動的に変えたい

Question

やりたいこと

パソコン用画面では、このようなテーブル構成になっています。

それをスマホやパソコンでもブラウザ横幅を変えたときに、このようにしたいです。

横幅が500pxを越えたらパソコン用横幅に、
横幅が500px以下なら、スマホ用横幅に変えたいです。

試したこと/調べたこと

CSSでレスポンシブ対応をするには、media only screenを使うことは分かりました。

@media only screen and （max-width: 500px){
    スマホ用サイズ
     ???
}
@ media only screen and （min-width: 501px){
   パソコン用サイズ
    ???
}

しかし、「？？？」の部分をどうしたらいいかがわかりません。

display:block
にすることで、ヘッダー部と値部が交互に縦並びになることは確認しましたが、私のやりたい表構成である「左列にヘッダー部、右列に値部」とするには、どのようにすれば良いのでしょうか？

Answer 1

CSSで構造を変化させることはできません
jsで書き換えるか、テーブルをやめることです

Answer 2

display: flex; で横並びさせたらどうでしょう。

@media only screen and (max-width: 800px){
  table > tbody {
    display: flex;
  }
  tr, th, td {
    display: block;
  }
}

CodePenサンプル

Comments

[meex]

まさにこれです！ありがとうございます。

すみません、1点質問なのですが、
例えば、テーブルが2種類あるとして、それぞれ
class="table1"
class="table2"
になっているとします。
もし回答いただいたこの方法を行うと、table1, table2の両方に効いてしまいます。

@media only screen and (max-width: 800px){
table1 > tbody {
display: flex;
}
table1 tr, table1 th, table1 td {
display: block;
}
}
というように、クラス指定したのですがうまくいきませんでした。
クラス指定を行う書き方は、どのようになりますでしょうか？

[hatena19]

Class名の前に . (ドット)が必要です。

@media only screen and (max-width: 800px){
.table1 > tbody {
display: flex;
}
.table1 tr, .table1 th, .table1 td {
display: block;
}
}

[meex]

この度はありがとうございましたm(__)m