レスポンシブデザイン時のテーブルレイアウトの一つの参考。
600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。
幅600pxのテーブル
見出しA | 見出しB | 見出しC | 見出しD |
---|---|---|---|
コンテンツA | コンテンツA | コンテンツAコンテンツA | コンテンツAコンテンツAコンテンツA |
コンテンツBコンテンツB | コンテンツB | コンテンツBコンテンツBコンテンツB | コンテンツBコンテンツB |
コンテンツCコンテンツCコンテンツC | コンテンツCコンテンツCコンテンツCコンテンツC | コンテンツCコンテンツC | コンテンツCコンテンツCコンテンツC |
HTML
<div class="tblwrapper"> <table class="rdtbl"> <thead> <tr> <th>見出しA</th> <th>見出しB</th> <th>見出しC</th> <th>見出しD</th> </tr> </thead> <tbody> <tr> <td>コンテンツA</td> <td>コンテンツA</td> <td>コンテンツAコンテンツA</td> <td>コンテンツAコンテンツAコンテンツA</td> </tr> <tr> <td>コンテンツBコンテンツB</td> <td>コンテンツB</td> <td>コンテンツBコンテンツBコンテンツB</td> <td>コンテンツBコンテンツB</td> </tr> <tr> <td>コンテンツCコンテンツCコンテンツC</td> <td>コンテンツCコンテンツCコンテンツCコンテンツC</td> <td>コンテンツCコンテンツC</td> <td>コンテンツCコンテンツCコンテンツC</td> </tr> </tbody> </table> </div>
CSS
.tblwrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; } table.rdtbl{ width:600px; border-collapse:collapse; border:1px solid #aaa; } table.rdtbl th, table.rdtbl td{ padding:8px; border:1px solid #aaa; } table.rdtbl th{ background:rgb(165,255,255); text-align:center; }
tableを囲んだdivに
overflow-x:auto; -webkit-overflow-scrolling:touch;
を入れると、PCでは横スクロール、スマホなどでは左右にスワイプできます。