スポンサーサイト

/ スポンサー広告 / Comment[-]

tableのレスポンシブ対応

/ HTML5/CSS3/jQuery / Comment[0]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

レスポンシブ対応で困らせるtableですが、これをレスポンシブ対応させる方法を幾つか挙げます。具体的なソースはインスペクタなどで参照してください。
※ブレイクポイント:1000px

項目と内容が対になっているテーブルなら簡単

以下のようなthとtdが対のテーブルは簡単にレスポンシブ化が可能です。

名前 長倉 怜二
年齢 24歳
血液型 A型
愛車 ジムニー

タダ単にtable,tbody,tr,th,tdをdisplay:block;にして落としてスタイルを整えているだけです。

thが同行に複数あるテーブルの場合

問題はこのケースです。スマホで快適に見れる列数はせいぜい2列。テーブルに列が3以上あるとスマホの狭い画面ではキツくなり、blockで落としてしまうとワケが分からなくなります。

名前 年齢 血液型 愛車
長倉 怜二 24歳 A型 ジムニー
長倉 怜二 24歳 A型 ジムニー

そこで

ちょっとソースに細工します。tdの内容をspanで囲っときます。

<table class="default"> <tr> <th>名前</th> <th>年齢</th> <th>血液型</th> <th>愛車</th> </tr> <tr> <td><span>長倉 怜二</span></td> <td><span>24歳</span></td> <td><span>A型</span></td> <td><span>ジムニー</span></td> </tr> <tr> <td><span>長倉 怜二</span></td> <td><span>24歳</span></td> <td><span>A型</span></td> <td><span>ジムニー</span></td> </tr> </table>

そして、以下のようなスタイルを書きます。

table.default2, table.default2 tbody { width: 100%; display: block; text-align: left; } table.default2 tr { width: 100%; display: table; margin-bottom: 1em; } table.default2 tr > th { display: none; } table.default2 tr > td { display: table-row; border: none; } table.default2 tr > td span { display: table-cell; padding: 0.5em; border: 1px solid #ccc; border-left: 0; } table.default2 tr > td:before { content: ''; display: table-cell; vertical-align: top; padding: 0.5em; border: 1px solid #ccc; background: #f2f2f2; } table.default2 tr > td:nth-child(1):before { content: '名前'; } table.default2 tr > td:nth-child(2):before { content: '年齢'; } table.default2 tr > td:nth-child(3):before { content: '血液型'; } table.default2 tr > td:nth-child(4):before { content: '愛車'; }

プレビュー

名前 年齢 血液型 愛車
長倉 怜二 24歳 A型 ジムニー
長倉 怜二 24歳 A型 ジムニー

各td内に:beforeを使ってthに相当するセルを生成してしまうという方法です。まあこれがベストな方法かと思われます。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可