テーブルのレスポンシブ対応について考えよう

HTMLには、テーブル（表）を作成するためのTABLEタグがありますよね。
テーブルをPCで見る場合は、大抵ウィンドウに十分な幅があったり、ブラウザの幅をある程度まで縮めた場合に画面全体が横スクロールできるようになったりするため、テーブル自体が伸縮することはあまりありません（デザインによっては伸縮するものは勿論あります）。

対してスマートフォンの場合は画面幅が狭いため、画面からはみ出してしまったり、わずか数文字で折り返されてしまうこともあり、非常に見にくくなってしまいます。
今回は、テーブルをレスポンシブ対応するための工夫をご紹介します。

①PCと同じレイアウトにする

テーブルの行数、列数、文字数によっては、PCと同じレイアウトでも問題なく表示される場合があります。そういった場合は特別な対応をする必要はありません。
工夫するとすれば、テーブル内のpaddingをPCより控えめにすることで、1行あたりの文字数を増やすことができます。
最近は画面の大きなスマホも増えてきていますが、iPhone5/SEの画面サイズ（320px×568px）で確認しておくと、他の端末でも問題なく表示されるでしょう。

②1行表示にする

テーブルの列数を1行にして、セルを1行ずつ表示させます。この方法だとセル一つ一つで、十分な幅が取れるメリットがあります。ただし行数が増えるので、ボリュームによっては非常に縦長のページになってしまうのがデメリットです。
1行表示にする方法は以下の通りです。

行見出しがある場合

行見出し→内容→内容→行見出し→…といった順番で1行ずつ並びます。

 

thとtdにdisplay:block;とwidth:100%;を入れることで1行にしています。

列見出しもある場合

行見出し→列見出し：内容→列見出し：内容→行見出し→行見出し→…といった順番で1行ずつ並びます。
列見出しが内容と同じセルの頭に表示されるのがポイントです。

 

thとtdにdisplay:block;とwidth:100%;を入れて1行表示にする方法は、行見出しのみの時と同じです。
さらに列見出しを表示する方法として、疑似要素を使っています（疑似要素について分からない人は【CSS】疑似要素について知ろうをご覧ください）。
content: attr(data-title) ” :”;を使って、HTMLのtdタグに記述したdata-titleに、コロンを付けて表示させることができます。
疑似要素はdisplay:inlineにすることでインライン要素にしています。
本来の列見出し（thead内のth）は不要になるので、display:none;で非表示にします。

③横スクロールを付ける

テーブルのみ横スクロールを適用させることで、行や列の多いテーブルや、結合を使用している複雑なテーブルでもPCと同じ配置で表示させることが出来ます。
ユーザーの手で操作する必要があるコンテンツになるので、テーブル付近に「横スクロールできます」等のアナウンスがあると親切ですね。
実装方法は以下の通りです。

また、「ScrollHint」などのJSライブラリを使用すれば、横スクロールができることを示すアニメーションを表示することができます。

まとめ

必要な情報が載っているはずのテーブルが見づらいと感じてしまうと、ユーザーがページを離脱する確率が上がってしまいます。
メリット・デメリットを考慮したうえで、最も見やすいと思えるレイアウトを採用するようにしましょう。