困っていること

あるテーブルデザインをレスポンシブでしているのですが
うまくいきません。

##やりたいこと
PC

こんなテーブルデザインを作成しています。
タイトル、内容の部分が複数行になると

１部分大きくなっても他のタイトル部分も大きくなってくれます。

SP

spのデザインはこんな感じです。

pc版のコードは以下です。

html

<table class="table">
<tr class="table__row">
  <th class="table__title">タイトル</th>
  <th class="table__title">タイトル</th>
  <th class="table__title">タイトル</th>
  <th class="table__title">タイトル</th>
</tr>
<tr class="table__row">
  <td class="table__content">内容</td>
  <td class="table__content">内容</td>
  <td class="table__content">内容</td>
  <td class="table__content">内容</td>
</tr>
</table>

css

.table {
  width: 100%;
}
.table__row {
  text-align: center;
}
.table__title {
  max-width: 100px;
  background: #ff0000;
  color: #fff;
}

##問題
pc版のコードだけだとspのようなデザインにできなくなります。
その場合、
htmlを

<table class="table">
<tr class="table__row">
  <th class="table__title">タイトル</th>
  <td class="table__content">内容</td>
</tr>
<tr class="table__row">
  <th class="table__title">タイトル</th>
  <td class="table__content">内容</td>
</tr>
<tr class="table__row">
  <th class="table__title">タイトル</th>
  <td class="table__content">内容</td>
</tr>
<tr class="table__row">
  <th class="table__title">タイトル</th>
  <td class="table__content">内容</td>
</tr>
</table>

この構成にしない限りspのデザインは再現できないと思うのですが
どうすればcssだけで上記のようなデザインができますでしょうか？

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

回答1件

ベストアンサー

tableは使わずに、CSS Flexbox か CSS Grid を使うことを検討されるといいと思います。

あと、内容的には、タイトルと内容でセットになると思いますので、HTMLをそれに合わせた設計にすべきですね。
例えば、dl dt dd を使って、

html
1<dl id="d_list">
2	<dt>タイトル1</dt>
3	<dd>内容1</dd>
4	<dt>とても長い長いタイトル2</dt>
5	<dd>内容2</dd>
6	<dt>タイトル3</dt>
7	<dd>内容3</dd>
8	<dt>タイトル4</dt>
9	<dd>内容4</dd>
10</dl>

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説 | webliker

CSS Grid を使ったコード例

css
1#d_list dt, #d_list dd {
2  text-align: center;
3  margin: 0;
4}
5#d_list dt {
6  background: #ff0000;
7  color: #fff;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11}
12
13#d_list {
14  display: grid;
15  grid-gap: 5px;
16  grid-template-columns: 25% 25% 25% 25%;
17  grid-template-rows: auto auto;
18  grid-template-areas:
19    "t1 t2 t3 t4"
20    "d1 d2 d3 d4";
21}
22
23#d_list dt:nth-of-type(1) {
24  grid-area: t1;  
25}
26#d_list dt:nth-of-type(2) {
27  grid-area: t2;  
28}
29#d_list dt:nth-of-type(3) {
30      grid-area: t3;  
31}
32#d_list dt:nth-of-type(4) {
33      grid-area: t4;  
34}
35#d_list dd:nth-of-type(1) {
36      grid-area: d1;  
37}
38#d_list dd:nth-of-type(2) {
39      grid-area: d2;  
40}
41#d_list dd:nth-of-type(3) {
42      grid-area: d3;  
43}
44#d_list dd:nth-of-type(4) {
45      grid-area: d4;  
46}
47
48@media screen and (max-width:600px) {
49  #d_list {
50    grid-template-columns: 50% 50%;
51    grid-template-rows: auto auto auto auto;
52    grid-template-areas:
53      "t1 t2"
54      "d1 d2"
55      "t3 t4"
56      "d3 d4";
57  }
58}

動作確認用サンプル

CSS Flexbox を使って書いてみました。

css
1#d_list2 dt, #d_list2 dd {
2  text-align: center;
3  margin: 0;
4}
5#d_list2 dt {
6  background: #ff0000;
7  color: #fff;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11}
12#d_list2 {
13  display: flex;
14  flex-wrap: wrap;
15  justify-content: space-between ;
16}
17#d_list2 dt, #d_list2 dd{
18  width: 24%;
19}
20#d_list2 dd {
21  order: 1;  
22}
23@media screen and (max-width:600px) {
24  #d_list2 dt, #d_list2 dd{
25    width: 48%;
26  }
27  #d_list2 dt:nth-of-type(n+3) {
28    order: 1;  
29  }
30  #d_list2 dd:nth-of-type(n+3) {
31    order: 2;  
32  }
33}