<table>のレスポンシブ対応について

Question

"colspan"を使って<table>のレイアウトをした場合、下記のように書くと...

<table>
　<tr>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　</tr>
　<tr>
　　<td colspan="2">テラテイル1</td>
　　<td colspan="3">テラテイル2</td>
　</tr>
</table>

このような表ができると思います。（雑ですみません）

｜テラテイル｜テラテイル｜テラテイル｜テラテイル｜テラテイル｜
｜　　　テラテイル１　　｜　　　　　　テラテイル２　　　　　｜

これを、たとえば(max-width:767px)の時は以下のように"colspan"を変えたいなと思った場合、どこをどう修正すればいいのでしょうか。

｜テラテイル｜テラテイル｜テラテイル｜テラテイル｜テラテイル｜
｜　　　　　　テラテイル１　　　　　｜　　　テラテイル２　　｜

<table>
　<tr>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　</tr>
　<tr>
　　<td colspan="3">テラテイル1</td>　←ここのcolspanを変えたい
　　<td colspan="2">テラテイル2</td>　←ここのcolspanを変えたい
　</tr>
</table>

試したこと

単純発想でこんな感じにしたのですが、、、

<table>
　<tr>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　　<td>テラテイル</td>
　</tr>
　<tr class="teratail">　←クラス名を付ける
　　<td colspan="2">テラテイル1</td>
　　<td colspan="3">テラテイル2</td>
　</tr>
　<tr class="teratail-res">　←クラス名を付ける
　　<td colspan="3">テラテイル1</td>
　　<td colspan="2">テラテイル2</td>
　</tr>
</table>

.teratail-res{
  display: none;
}

@media screen and (max-width:767px){
.teratail{
  display: none;
}
.teratail-res{
  display: block;
}
}

そもそも<table>とdisplay: block;は相性が良くないようで、レイアウトが崩壊しました。

レスポンシブ用のif文なんかは書けないのでしょうか。初心者です。どなたか解決方法をご教授ください。

Comments

[spookybird]

tableタグはレスポンシブなんて考え方が存在するよりかなり昔からあるタグなので、レスポンシブなデザインとものすごく相性が悪いです。レスポンシブな表組みレイアウトを作りたい場合は、flex や grid といった新しい表現を使った方が簡単に実現できることが多いです。

Answer 1

tr は table-row に相当します。

.teratail-res {
  display: table-row;
}

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

Comments

[Gr.]

x_xさん
回答ありがとうございます！
おっしゃる通りdisplay: table-row;でいけました。
助かりました。感謝いたします。

Answer 2

colspanは構造なので、cssで処理するのは微妙
javascriptで付け替える選択肢はないのでしょうか？

Comments

[Gr.]

yambejpさん
回答ありがとうございます！
javascriptで付け替えるという選択肢があるのですね！
プログラミング初心者で、恥ずかしながらまだjavascriptって何？というレベルですが、今後学習していこうと思います。
ありがとうございました。

Answer 3

display: table-rowでいけると思います。

@media screen and (max-width:767px){
.teratail{
  display: none;
}
.teratail-res{
  //display: block;
  display: table-row;
}
}

Comments

[Gr.]

tori72さん
回答ありがとうございます！
display: table-row;で成功しました。
何でもかんでもdisplay: block;ではないのですね。
ありがとうございました。

[rina]

回答重複していましたね。。すみません。
ちなみに、display:none;と設定しているところから、開発者ツールを開いてその設定を取り消すと、デフォルトの設定(display: table-row;)が見れて、確認に便利ですよ！
ご参考までに。

[Gr.]

おおおお！
見れました！
そんな技が！
いいこと聞きました。ありがとうございます。