やりたいこと

レスポンシブのサイトでのテーブルデザインについて相談させてください。

デザイン

html

<div style="display: flex;">
  <table>
    <tr>
      <th>A1</th>
      <td>A1の値</td>
    <tr>
      <th>A2</th>
      <td>A2の値</td>
    </tr>
    <tr>
      <th>A3</th>
      <td>A3の値</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>B1</th>
      <td>B1の値</td>
    <tr>
      <th>B2</th>
      <td>B2の値</td>
    </tr>
    <tr>
      <th>B3</th>
      <td>B3の値</td>
    </tr>
  </table>
</div>

デザインは上記のような感じでA1,A2,A3...というテーブルが左側にあり、B1,B2,B3...というテーブルがありそれをflexで横並びにしています。
PCの場合はこの感じで、SPになったらB1,B2,B3...のテーブルがカラム落ちして下につくような物を想定して作成しました。

しかし、このままだと一つ問題があり、
A1とB1のようにPCだと横並びで表示されるので
例えばA1の値が2行、B1の値が1行となるとそもそもの高さが合わなくなってしまいます。

そのため、PCでみたときに横並びになってるものがどちらか複数行になった場合に高さが合うようにしたいのですがいい方法ありませんでしょうか？

やったこと・試したこと

<div style="display: flex; flex-wrap: wrap;">
  <div style="width: 50%">
     <span>A1</span>
     <span>A1の値</span>
  </div>
  <div style="width: 50%">
     <span>B1</span>
     <span>B1の値</span>
  </div>
  <div style="width: 50%">
     <span>A2</span>
     <span>A2の値</span>
  </div>
  <div style="width: 50%">
     <span>B2</span>
     <span>B2の値</span>
  </div>
</div>

という感じでやると複数行対応はできるのですがSPになったときに
A1 A1の値
B1 B1の値
.
.
のように交互になってしまうので実現できません。

flexやgridなどを調べてみたのですが解決しそうになかったので相談させて頂きました。

Lhankor_Mhy

2020/12/04 07:58

ブレークポイントは何でもいいですか？

yambejp

2020/12/04 08:13

具体的な期待するイメージを図示してもらった方が回答しやすいと思います

teach

2020/12/04 08:20

ご回答ありがとうございます！ブレークポイントはなんでも大丈夫です！ SPのイメージも貼り付けておきました！

行動規範の内容に同意します

回答4件

CSS Grid でやってみました。

html
1<div class="tbl">
2  <div class="a r1 th">A1</div>
3  <div class="a r1 td">A1の値</div>
4  <div class="a r2 th">A2</div>
5  <div class="a r2 td">A2の値<br>A2の値</div>
6  <div class="a r3 th">A3</div>
7  <div class="a r3 td">A3の値</div>
8  <div class="b r1 th">B1</div>
9  <div class="b r1 td">B1の値</div>
10  <div class="b r2 th">B2</div>
11  <div class="b r2 td">B2の値</div>
12  <div class="b r3 th">B3</div>
13  <div class="b r3 td">B3の値</div>
14</div>

css
1.tbl {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4}
5.th {
6  font-weight: bold;
7}
8
9@media screen and (min-width: 900px) {
10  .tbl {
11    grid-template-columns: 1fr 1fr 1fr 1fr;
12  }
13  a.th {
14    grid-column: 1;
15  }
16  a.td{
17    grid-column: 2;
18  }
19  b.th {
20    grid-column: 3;
21  }
22  b.td{
23    grid-column: 4;
24  }
25  .r1 {
26    grid-row: 1;
27  }
28  .r2 {
29    grid-row: 2;
30  }
31  .r3 {
32    grid-row: 3;
33  }
34  .r4 {
35    grid-row: 4;
36  }
37}

CSS Flex でつくってみた。
（gogoweb_ikedaさんの回答を参考に修正しました。）

html
1<div class="tbl">
2  <div class="a">
3    <div>A1</div>
4    <div>A1の値</div>
5  </div>
6  <div class="b">
7    <div>B1</div>
8    <div>B1の値</div>
9  </div>
10  <div class="a">
11    <div class="a">A2</div>
12    <div class="a">A2の値<br>A2の値</div>
13  </div>
14  <div class="b">
15    <div class="b">B2</div>
16    <div class="b">B2の値</div>
17  </div>
18  <div class="a">
19    <div class="a">A3</div>
20    <div class="a">A3の値</div>
21  </div>
22  <div class="b">
23    <div class="b">B3</div>
24    <div class="b">B3の値</div>
25  </div>
26</div>

css
1.tbl {
2  display: flex;
3  flex-wrap: wrap;
4}
5.tbl > div {
6  display: flex;
7  width: 50%
8}
9.tbl > div > div {
10  width: 50%  
11}
12
13@media screen and (max-width: 900px) {
14   .tbl > div {
15    width: 100%;
16  }
17  .a {
18    order: -1
19  }
20}

投稿2020/12/04 08:30

編集2020/12/04 09:19

hatena19

総合スコア34073

出遅れたなあ……

サンプル

css
1
2div {
3  display: grid;
4  grid-template-columns: repeat(4,auto);
5  grid-auto-flow: dense;
6}
7
8table, tbody, tr{
9  display: contents;
10}
11
12th, td{
13  all: unset;
14  display: block;
15}
16
17table:first-child th{
18  grid-column-start: 1;
19}
20
21table:first-child td{
22  grid-column-start: 2;
23}
24
25@media (max-width: 700px){
26  div {
27    grid-template-columns: repeat(2,auto);
28  }
29  table:first-child th{
30    grid-column-start: auto;
31  }
32  table:first-child td{
33    grid-column-start: auto;
34  }
35}
36

投稿2020/12/04 09:08

編集2020/12/04 09:45

Lhankor_Mhy

総合スコア36928

AのdivにclassA BのdivにclassBをつけて
SP表示時に

css
1classA{
2order:1;
3}
4classB{
5order:100;
6}

でclassAに属する要素が先頭に、classBに属する要素が後ろに移動しませんか？
＊要素が上記のシンプルな要素なら大丈夫だと思いますが複雑なテーブル組みだとちょっとわかりません。

*コード追記しました。

HTML
1<div class="flexwrap">
2  <div class="classA">
3     <span>A1</span>
4     <span>A1の値</span>
5  </div>
6  <div class="classB">
7     <span>B1</span>
8     <span>B1の値<br/>B1の値</span>
9  </div>
10  <div class="classA">
11     <span>A2</span>
12     <span>A2の値</span>
13  </div>
14  <div class="classB">
15     <span>B2</span>
16     <span>B2の値</span>
17  </div>
18</div>

CSS
1.flexwrap{
2  display: flex;
3  flex-wrap: wrap;
4}
5
6.classA,
7.classB{
8  width: 50%;
9}
10
11@media screen and (max-width: 760px){
12.classA,
13.classB{
14  width: 100%;
15}
16.classA{
17  order:1;
18}  
19.classB{
20  order:100;
21}
22}