tableの並びの横か縦かを要素とビューポートの幅によって切り替えたい

Question

WordPressでウェブサイトを制作しています。
サイトの中に表があるページがあります。

<table>
<tbody>
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
<tr><th>電話番号</th><td><a href="tel:[phone]">03-3333-3333</a></td></tr>
<tr><th>コメント</th><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
</tbody>
</table>

なお、thとtdのインナーテキストは、WPから吐き出しており、ページによって文字数が異なります。

狭い画面で閲覧した場合、表中のテキストの折り返しが多くなり、見にくいので、画面が狭い場合は、thとtdを縦に並べて表示させています。

ブレイクポイントについて、本来は、下図のように、ビューポートの幅と折り返しが生じるtableの幅を比較して、前者の方が狭い場合に縦並びにしたいです。

しかし、やり方が分からないので、現状はブレイクポイントを以下のように599pxに仮置きしています。

@media (max-width: 599px){
th,td{
  display:block;
}}

しかし、これでは次のような問題が生じます。

• 画面幅が599px以下の場合、thとtdを横並びにしても画面幅が十分に足りている場合でも、不必要に縦並びになってしまう。
• 画面幅が599px超の場合、テキストに折り返しが生じている場合でも、横並びで表示される。

そこで、ビューポートの幅と折り返しが生じるtableの幅を比較して、前者の方が狭い場合に縦並びにする方法を助言を頂けますと大変助かります。

ビューポート幅はmatchMediaによって取得すればよいかと存じますが、折り返しが生じる要素幅をどのように取得すればよいかが分かりません。

Comments

[yambejp]

縦並びとはこうなればいいのでしょうか？
<table>
<tbody>
<tr><th>所在地</th></tr>
<tr><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
<tr><th>電話番号</th></tr>
<tr><td><a href="tel:[phone]">03-3333-3333</a></td></tr>
<tr><th>コメント</th></tr>
<tr><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
</tbody>
</table>

Answer 1

こんな感じの切り替え？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    if(t1.querySelector('th ~ td')){
      t1.querySelectorAll('th ~ td').forEach(td=>{
        const tr=document.createElement('tr');
        td.closest('tr').after(tr);
        tr.appendChild(td);
      });
    }else{
      t1.querySelectorAll('td').forEach(td=>{
        const tr=td.closest('tr');
        tr.previousElementSibling.appendChild(td);
        tr.remove();
      });
    }
  });
});
</script>
<input type="button" id="btn" value="btn">
<table border>
<tbody id="t1">
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
<tr><th>電話番号</th><td><a href="tel:[phone]">03-3333-3333</a></td></tr>
<tr><th>コメント</th><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
</tbody>
</table>

上記動作で問題ないならmatchMedia

<script>
window.addEventListener('resize', ()=>{
  const flg_1=t1.querySelector('th ~ td')!==null;
  const flg_2=window.matchMedia( "(min-width: 599px)" ).matches;
  if (flg_1 && !flg_2) {
    t1.querySelectorAll('th ~ td').forEach(td=>{
      const tr=document.createElement('tr');
      td.closest('tr').after(tr);
      tr.appendChild(td);
    });
  }else if(!flg_1 && flg_2){
    t1.querySelectorAll('td').forEach(td=>{
        const tr=td.closest('tr');
      tr.previousElementSibling.appendChild(td);
      tr.remove();
    });
  }
});
</script>
<table border>
<tbody id="t1">
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
<tr><th>電話番号</th><td><a href="tel:[phone]">03-3333-3333</a></td></tr>
<tr><th>コメント</th><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
</tbody>
</table>

Comments

[michir]

コメントありがとうございます！
質問文を編集いたしました。
分かりにくく大変申し訳ございませんでした！

[yambejp]

わたしの追記分が回答になっていませんか？

[michir]

コメントありがとうございます！

私の方で何らかの勘違いをしているかもしれず大変恐縮なのですが、追記分のコードをコピペしてそのままHTMLファイルにして動かしてみたところ、599pxで切り替わるのみで、折り返しの有無で切り替わるようにはなっていませんでした

Answer 2

具体的にどのようなレイアウトなのか不明瞭ですが、
とりあえず下記のような感じでどうでしょう。

テーブルでは難しいのでFlexレイアウトで実装してます。

tr {
  display: flex;
  flex-wrap: wrap;
}
th {
  width: 100px;
}
th,td{
  display:block;
}
@media (max-width: 599px){
  tr {
    flex-direction: column;
  }
  th,td{
    width: 100%;
  }
}

CodePen サンプル

Comments

[michir]

コメントありがとうございます！
質問文を編集いたしました。
分かりにくく大変申し訳ございませんでした！