表のレスポンシブ対応
大きな表(テーブル)は、スマートフォンで見づらい時があります。
本ページでは、表をレスポンシブ対応させる方法をご紹介します。
表をスマートフォンで表示した場合
パソコンで、以下のように表示される表があったとします。
この表は、widthなどで横幅を指定しなければ、スマートフォンで表示した時は自動でディスプレイ幅に収まるように表示されます。
このように、ディスプレイの横幅からはみ出したりしないため、何もしないというのも1つの手です。ただし、横幅がほとんど取れない列があり、見づらいとは思います。
なお、表をホームページに表示させる方法は、「HTMLに表を挿入して装飾する」をご参照下さい。
簡単に表をスマートフォン対応させる
表で横幅を取られているのは、文字と枠線(セル間)の部分です。このため、スマートフォン用CSSファイルで以下の対応をします。
.test { margin: 14px auto; border-collapse: collapse; font-size: 90%; } .test th { color: white; padding: 6px 8px; background-color: blue; } .test td { padding: 6px 8px; } .test tbody tr:nth-child(2n) { background-color: lightgray; }
赤字部分で、セル間をなくしてフォントサイズを小さくしています。その分、青字部分で行単位に色分けしています。table要素にクラスtestを適用すると、以下のようになります。
また、.testにtable-layout: fixed;と、width: 100%;を追加すると、以下のようになります。
概要部分が狭くなっていますが、その他部分は幅が広くなって見やすくなっています。
このようすると、文字が小さくなるデメリットもありますが、若干の調整で見栄えを良くすることができます。
最大幅の指定
これまでの対応を行った場合、パソコンやスマートフォンを横にして見た時、表が横長になる可能性があります。
このような時は、クラスtestにmax-width: 720px;などと最大幅を指定できます。これで、以下のように720pxの横幅で表示されます。
最大幅なので、画面の横幅が720pxより小さい場合は、表は画面に合わせた横幅で表示されます。
DataTablesで縦並びさせる
jQueryプラグインのDataTablesでも、スマートフォンで見ると、デフォルトでは以下のように表示されます。
DataTablesでは、レスポンシブに表を変えることもできます。DataTablesをダウンロードする時に、Responsiveにチェックしておきます。すると、Responsive-x.x.xというフォルダもダウンロードされるため、DataTablesフォルダごとアップロードします。
アップロード後、「DataTablesの使い方」でDataTablesを利用できるようになっている場合は、table要素で以下のように指定します。
<table id="myTable" class="display responsive nowrap">
赤字のnowrapを指定すると、途中で文字が折り返されません。上記により、以下のように表示されます。
最初は表示されない列がありますが、左のアイコンをタップすると隠れた部分が表示されます。
隠れていた列が縦並びで表示されるため、表ではなくなってしまいますが、見やすくはなると思います。
この時、気を付ける点は、文字が多いと画面からはみ出して表示される可能性があります。
はみ出さないようにするためには、nowrapを指定せず、折り返したくない箇所でクラスにdt-nowrapを指定します。
<th class="dt-nowrap">キャンプ用品</th> <th class="dt-nowrap">メーカ</th> <th class="dt-nowrap">製品名</th> <th class="dt-nowrap">価格</th>
上記により、以下のように文字が多い部分は折り返して表示できます。
なお、パソコンなど横幅が広いディスプレイで表示すると、以下のように全ての列が表示されます。
次のページ「動画のレスポンシブ対応」