表のレスポンシブ対応

大きな表(テーブル)は、スマートフォンで見づらい時があります。

本ページでは、表をレスポンシブ対応させる方法をご紹介します。

表をスマートフォンで表示した場合

パソコンで、以下のように表示される表があったとします。

5列×6行の表

この表は、widthなどで横幅を指定しなければ、スマートフォンで表示した時は自動でディスプレイ幅に収まるように表示されます。

横幅が狭くて見づらい表

このように、ディスプレイの横幅からはみ出したりしないため、何もしないというのも1つの手です。ただし、横幅がほとんど取れない列があり、見づらいとは思います。

なお、表をホームページに表示させる方法は、「HTMLに表を挿入して装飾する」をご参照下さい。

簡単に表をスマートフォン対応させる

表で横幅を取られているのは、文字と枠線(セル間)の部分です。このため、スマートフォン用CSSファイルで以下の対応をします。

【表をスマートフォン対応させる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で表示された表

最大幅なので、画面の横幅が720pxより小さい場合は、表は画面に合わせた横幅で表示されます。

DataTablesで縦並びさせる

jQueryプラグインのDataTablesでも、スマートフォンで見ると、デフォルトでは以下のように表示されます。

DataTablesで作成した表

DataTablesでは、レスポンシブに表を変えることもできます。DataTablesをダウンロードする時に、Responsiveにチェックしておきます。すると、Responsive-x.x.xというフォルダもダウンロードされるため、DataTablesフォルダごとアップロードします。

アップロード後、「DataTablesの使い方」でDataTablesを利用できるようになっている場合は、table要素で以下のように指定します。

【DataTablesレスポンシブ対応table要素での指定】
<table id="myTable" class="display responsive nowrap">

赤字のnowrapを指定すると、途中で文字が折り返されません。上記により、以下のように表示されます。

nowrapを使った表

最初は表示されない列がありますが、左のアイコンをタップすると隠れた部分が表示されます。

nowrapで隠れた部分を表示

隠れていた列が縦並びで表示されるため、表ではなくなってしまいますが、見やすくはなると思います。

この時、気を付ける点は、文字が多いと画面からはみ出して表示される可能性があります。

はみ出さないようにするためには、nowrapを指定せず、折り返したくない箇所でクラスにdt-nowrapを指定します。

【nowrapを個別に指定】
<th class="dt-nowrap">キャンプ用品</th>
<th class="dt-nowrap">メーカ</th>
<th class="dt-nowrap">製品名</th>
<th class="dt-nowrap">価格</th>

上記により、以下のように文字が多い部分は折り返して表示できます。

文字が多い列は折り返して表示

なお、パソコンなど横幅が広いディスプレイで表示すると、以下のように全ての列が表示されます。

全ての列を表示

次のページ動画のレスポンシブ対応