【レスポンシブ】列数が多いテーブルの対応策（横スクロール等）

2021.10.14

以前、レスポンシブ対応の２列のテーブルを入れるときのコードをコピペ用に記載しました

レスポンシブ対応のシンプルな２列のテーブル
shiroan.net
2020.01.20

テーブルが２列、構成によっては３列とかなら上記のやり方でうまくいきますが
こんなテーブルならスマホのときどうするか
↓ ↓ ↓ ↓ ↓

3月4月5月6月7月8月9月10月
鳥取500560570500510520560520
岡山600610590630610600630590
島根300330320340370400310340
広島120013001380116010509608901050
山口650660620600610600660610

ということでこれまで実際に行った解決策がこちらです

２段～にわける

3月4月5月6月
鳥取500560570500
岡山600610590630
島根300330320340
広島1200130013801160
山口650660620600
7月8月9月10月
鳥取510520560520
岡山610600630590
島根370400310340
広島10509608901050
山口610600660610

この見せ方でも大丈夫な場合はありかと思います

スマホ用の表を別に作り、PCとスマホで出し分け（表が２つ）

スマホではがっつり書き方を変えるパターンです
これならどんな表でも対応はできますが、作る作業＆更新の作業が２倍ということになります
作るのはともかく更新が２つというのが意外と手間がかかるんですよね
時間が経つと２つあることをうっかり忘れてしまい　PCの方しか更新してなかった、ということをやってしまったりします…
なのでスマホでの見せ方にこだわる場合の最終手段でしょうか

そのまま、PCと同じ形のテーブルで見せる場合

幅を縮小して文字を小さくし、画面いっぱいに表示

数字の場合ある程度小さくても意外と収まったりするので１番多いタイプかもしれません
ただあまり小さいとユニバーサルデザインの観点からはふさわしくないことにもなるので、お客様の希望との兼ね合いをどうするか、ということになりますが

テーブルだけ横スクロールさせる

列数や値の文字数から画面いっぱいにおさめるのはどうしても難しい場合
テーブルをdivで囲み、そのdivタグに対して横スクロールの設定をします

HTML

<div class="table_box">
<table>
･
･
･
</table>
</div>

CSS

.table_box {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

これでテーブルだけが画面をはみ出した状態で表示され
スワイプすると横に流れるので全部見ることができます
一時期グローバルナビもこの方法で作っているのをよく見かけました

テーブルをPDFにしてリンクさせる

クリック（タッチ）するとPDFがダウンロードされ、大きく表示することができます
さらに拡大縮小もできるのでスマホでも文字を読み取りやすくなります
ページ上で見るよりひと手間かかる感はありますが表そのものは見やすいのが良いです

これまでの対応策としては、ひとまずこんな感じでしょうか…
テーブルに限りませんが、

  • 何を見せるための表なのか
  • クライアントさんがどう見せたいか
  • 最終的にユーザーにわかりやすく伝わるか

のバランスをとりつつその時々で…ということですね (￣▽￣)

コメント