こんにちは工藤です。
今回はレスポンシブのテーブルの組み方の1例をご紹介します。
PC表示の時はこんな感じです。
PC表示の時
今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。
スマートフォン表示の時
tbody内のtdの箇所に、theadの項目を表示させてみました。
ソースは下記のようになります。
ソースコード
html|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</p></td> <td label="ヘッダー3"><p>項目1の内容</p></td> </tr> <tr> <th>項目2</th> <td label="ヘッダー1"><p>項目2の内容</p></td> <td label="ヘッダー2"><p>項目2の内容</p></td> <td label="ヘッダー3"><p>項目2の内容</p></td> </tr> <tr> <th>項目3</th> <td label="ヘッダー1"><p>項目3の内容</p></td> <td label="ヘッダー2"><p>項目3の内容</p></td> <td label="ヘッダー3"><p>項目3の内容</p></td> </tr> </tbody> <tr></tr> </table> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
table.table01 { width:100%; border-right:#3EB1C6 solid 1px; border-collapse: collapse; } table.table01 thead th { background:#3EB1C6; color:#FFF; padding:10px 15px; border-right:#FFF solid 1px; border-bottom:#FFF solid 1px; } table.table01 thead th:last-child { border-right:#3EB1C6 solid 1px; } table.table01 tbody th { background:#3EB1C6; color:#FFF; padding:10px 15px; border-bottom:#FFF solid 1px; vertical-align:top; } table.table01 tbody tr:last-child th { border-bottom:#3EB1C6 solid 1px; } table.table01 tbody td { background:#FFF; padding:10px 15px; border-left:#3EB1C6 solid 1px; border-bottom:#3EB1C6 solid 1px; vertical-align:top; } @media screen and (max-width: 640px) { table.table01 thead { display:none; } table.table01 tbody th { display:block; } table.table01 tbody td { display:block; } table.table01 tbody td::before { content: attr(label); float: left; clear:both; font-weight:bold; } table.table01 tbody td p { padding-left:6em; } } |
ポイント
レスポンシブ時にtheadは非表示にします。tbody内thとtdはブロック要素にして、幅を100%に設定します。
これでそれぞれ横に広がった状態になります。
theadを非表示にした代わりに、今回はtbody内tdにlabelで設定したtheadの項目名をcontentを使って表示させます。
:first-child等を使ってcontentに直接項目名を入れてもいいと思うのですが、時と場合によるかと思うのでその時は適宜調整してください。
tdの中のテキストはブロック要素にするため今回はpタグで括っておきます。
contentをfloatさせておくので、pタグはpaddingで文字数+隙間分設定します。
これで文字数が多い時にでも対応できるレスポンシブのテーブルが完成します。
テーブル内でpタグで括るのが煩わしければ、contentをブロック要素にして改行して表示させるのもありだと思います。
（というかスマホの表示領域を考えるとその方がよいかも）
割と簡単にできるので、どうぞ試してみてください。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/qXC_J4Zj31o
