表のレスポンシブ対応

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

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

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

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

5列×6行の表が表示されています。

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

5列×6行の表が表示されていますが、横幅が狭くて見づらくなっています。

このように、ディスプレイの横幅からはみ出したりしないため、何もしないというのも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を適用すると、以下のようになります。

5列×6行の表が、セル間の枠がなくなり少し小さな文字で表示されています。また、行ごとに色分けされています。

また、.testにtable-layout: fixed;と、width: 100%;を追加すると、以下のようになります。

5列×6行の表が、セル間の枠がなくなり少し小さな文字で表示されています。また、行ごとに色分けされています。各列は等幅で表示されています。

概要部分が狭くなっていますが、その他部分は幅が広くなって見やすくなっています。

このようすると、文字が小さくなるデメリットもありますが、若干の調整で見栄えを良くすることができます。

最大幅の指定

これまでの対応を行った場合、パソコンやスマートフォンを横にして見た時、表が横長になる可能性があります。

5列×6行の表が、セル間の枠がなくなり少し小さな文字で表示されています。また、行ごとに色分けされています。各列は等幅で表示されています。また、パソコンの横幅一杯に表が表示されています。

このような時は、クラスtestにmax-width: 720px;などと最大幅を指定できます。これで、以下のように720pxの横幅で表示されます。

5列×6行の表が、セル間の枠がなくなり少し小さな文字で表示されています。また、行ごとに色分けされています。各列は等幅で表示されています。また、横幅は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を指定せず、折り返したくない箇所でクラスにdt-nowrapを指定します。

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

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

文字が多い列は、折り返して表示されています。

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

文字が多い列は、折り返して表示されています。

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