レスポンシブデザインのtableレイアウト調整

Question

レスポンシブデザインで表(table)のカラム数を変更したい。

tableタグを使用して表を作成しています。
ラベルとテキストボックスが対になるように設置しています。
各要素に対してtdタグで囲っています。

(例)
ラベル1 テキストボックス1 ラベル2 テキストボックス2 ラベル3 テキストボックス3
ラベル4 テキストボックス4 ラベル5 テキストボックス5 ラベル5 テキストボックス5
以下続く…

このように、１レコードにつき６個のtdタグが存在します。
これらをあるpx以下になった時、１レコードにつき２個のtdタグ要素の表を作成したいです。

(例)
ラベル1 テキストボックス1
ラベル2 テキストボックス2
ラベル3 テキストボックス3
ラベル4 テキストボックス4
ラベル5 テキストボックス5
ラベル6 テキストボックス6
以下続く…

<table>
  <tr>
    <form>
      <td>
        <label for='ラベル1'>ラベル1</label>
      </td>
      <td>
        <input type='text' value='テキストボックス1'>
      </td>
    </form>
    <form>
      <td>
        <label for='ラベル2'>ラベル2</label>
      </td>
      <td>
        <input type='text' value='テキストボックス2'>
      </td>
    </form>
    <form>
      <td>
        <label for='ラベル3'>ラベル3</label>
      </td>
      <td>
        <input type='text' value='テキストボックス3'>
      </td>
    </form>
  </tr>
  <tr>
  以下続く…
  </tr>
</table>

table{
  width: 100%;
}

試したこと

CSSでdisplay: block;やラベル要素をthタグに変更して、tdタグに対してCSSを当てれないか試行錯誤しましたが私のスキルではたどり着きませんでした。

１レコードにつき６個の要素がありますが、どのようにして、１レコードにつき２個の要素にレイアウトを変更できるのか。
ご教授いただけると幸いです。
よろしくお願いいたします。

Comments

[kei344]

（質問文は編集できます）ご自身で試されたHTML/CSSを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[hatena19]

現状の表部分のHTMLとCSSを質問に追記してもらえますか。

[mari.rinn]

単純に2つテーブルを書いといて、メディアクエリによって、片方がdisplay:block;の時はもう片方はdisplay:none;で切り替えるようにするのではダメなのでしょうか？

[syu.153]

ありがとうございました。

Answer 1

これはどうですか？

サンプル

table{
  width: 100%;
}
@media screen and (max-width: 640px) {
  tr{
    display: grid;
    grid-template-columns: auto auto;
  }
}

---

余談ですが、HTMLの文法が間違っていますのでお気を付けください。formはtrの親になることはできません。

許可されている親要素

<table> 要素 (子の <tbody> を持たない場合で、 <caption>, <colgroup>, <thead> の各要素より後に限る)、 <thead>, <tbody>, <tfoot> の各要素

<tr>: 表の行要素 - HTML: HyperText Markup Language | MDN

Comments

[syu.153]

文法までご指摘いただきありがとうございます。勉強になります。