表のスマートフォン対応

レスポンシブウェブデザイン対応にしても、大きな表はスマートフォンで見辛い時があります。DataTables等のjQueryプラグインでも同様です。

本ページでは、表をスマートフォン対応させる方法を何通りかご紹介します。

尚、表をホームページに表示させる方法は「表の挿入」をご参照下さい。

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

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

パソコンでのテーブル表示例

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

最適化されていないサイトのスマホでのテーブル表示例

 このように、スマートフォンの幅からはみ出したりしないため、何もしないというのも1つの手です。

 但し、上の図では幅が殆ど取れない列があり、崩れたような印象を与えます。

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

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

【表をスマートフォン対応させるCSS】
table,table td,table th {
font-size: 80%;
border-spacing: 0px;
border-collapse: collapse;
border: none;
line-height: 100%;
}

 赤字部分はフォントサイズを小さくしています。

 緑の部分は枠をなくす設定です。

 青字部分は行の高さで余白が取られないようにしています。

 枠をなくしたため、分かり易いように行単位で色分けして表示すると、以下のようになります。

テーブルのスマホ対応例

 文字が小さくなるデメリットもありますが、文字が少ない場合は若干の調整で見栄えを良くする事が出来ます。

表を整える

 各列の幅を%で指定して調整も出来ます。

【表の各列幅を%で指定】
<tr>
<th style="width:15%;">キャンプ用品</th>
<th style="width:13%;">メーカ</th>
<th style="width:20%;">製品名</th>
<th style="width:13%;">価格</th>
<th style="width:39%;">概要</th>
</tr>

 赤字部分が幅の指定です。スマートフォン対応なので、pxではなく%で指定します。

 上記で調整すると以下のように表示されます。

スマホ対応で列毎に幅を調整した例

 1つ1つの表で幅の指定が必要なため少し手間ですが、見た目が良くなるよう調整出来ます。

最大幅の指定

 これまでの対応を行った場合、パソコンやランドスケープモードで見た時、表が横長になる可能性があります。

ランドスケープモードで見た時に表が横長になる例

 余白が気になる場合は、最大幅を指定出来ます。

【表の最大幅指定】
<style type="text/css">
<!--
.test {
max-width: 360px;
}
-->
</style>

 上記はクラスtestに対し、最大幅を360pxで指定しています。

 実際の<table>タグでこのクラスを指定すると、ランドスケープモードから見た時は以下のように指定した幅で表示されます。

ランドスケープモードで見た時に表が横長にならない例

 最大幅なので、画面幅が小さい場合は360pxより小さい幅で表示されます。つまり、360pxより幅が小さいポートレートモードで表示すると画面一杯に表示されます。

jQueryプラグインDataTables対応

 DataTablesでも同様に指定すると以下のように表示されます。

単純にスマートフォン対応した時のDataTables表示例

 DataTablesではレスポンシブに表を変える事も出来ます。

 DataTablesをダウンロードしたフォルダのextensions\Responsive配下に以下があります。

・css\dataTables.responsive.css
 レスポンシブ対応向けスタイルシートです。サーバーのスタイルシートを配置するディレクトリにアップロードします。
・js\dataTables.responsive.min.js
 DataTablesのレスポンシブ対応したJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。

 アップロード後、「DataTablesの使い方」でDataTablesを利用出来るようになっている場合は、<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。

【DataTablesレスポンシブ対応準備】
<script src="js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="css/dataTables.responsive.css" />

 赤字部分はJavaScriptとスタイルシートを保存したディレクトリに合わせて修正して下さい。

 <table>タグでは以下のように指定します。

【DataTablesレスポンシブ対応tableタグでの指定】
<table id="example" class="display responsive nowrap" cellspacing="0">

 赤字のnowrapを指定する事で途中で文字が折り返されません。

 上記により、以下のように表示されます。

DataTablesのレスポンシブ対応例

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

 この時、気を付ける点は文字が多いと以下のように画面からはみ出して表示されます。

折り返さない時のDataTables表示例

 もう一度タップすると元に戻りますが、はみ出さないようにも出来ます。

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

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

 上記は<th>タグに指定していますが、<td>タグでも同様に指定出来ます。又、文字が多くて折り返しが必要な箇所では指定しません。

 上記により、文字が多い場合は折り返して表示出来ます。

文字が多い時にはみ出さないようにした例

 表ではなくなってしまいますが、文字数が多い時の1つの対策です。

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

DataTablesでレスポンシブ対応した時のパソコンでの見え方

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加