みなさんスマホでのテーブルの表示をどうしていますか？
pcで表示した場合横に長いテーブルは、スマホにすると縦に圧縮されて非常に見づらい事になってしまいますよね。
そういうとき僕はpcとは別のテーブル組みを別に作ってスマホのときだけそちらを表示するような設定にしたりしてました。
でもスマホを意識していなかった昔の記事をいちいち作り直すのはとても面倒です。
やってられませ〜ん！
そこで今回はCSSだけでテーブルが横スクロール対応になる方法を紹介します。
スマホのテーブル横スクロール対応
本題に入る前に。
実は一手間あります
「CSSだけで」って書きましたが実は一手間あります。
table要素を<div class=”scroll”>で囲む
この作業があります。
javascriptでスマホのときだけ、すべてのtable要素にこの作業をやるようなスクリプトを書けば昔の記事をいちいち編集する手間は省けますが今回はやめときます。
なので、ちょっと面倒ですが昔の記事のHTMLを少しだけ弄る手間をかけてください。
ま、ちょっとの手間だからやっとくか。
横スクロール対応CSS
一手間かけて準備が出来たら横スクロール対応CSSを追加しましょう。
こちらです。
.scroll table{
width:100%;
}
.scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}
結構シンプルですよね。
どんな事やっているか順番に解説していきます。
CSS解説
.scroll table{
width:100%;
}
まずはテーブル要素に対してwidth:100%を設定しています。
.scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
}
テーブル要素を囲むボックスにoverflow: autoを設定します。
通常（overflow: autoを設定しない場合）ならボックス内の要素はコンテンツの幅に収まるように表示されます。
スマホでテーブル要素が縦長に圧縮されて表示されてしまうのはそのせいです。
内容物がスマホの横幅に収まるように自動的に並べ替えられて表示されます。
しかしoverflow: autoを設定すると内容物はそのままの横幅で表示されます。
つまりpcで見えていた横幅のまま表示されるのでスマホの横幅に収まらない部分は表示されません。
内容物のサイズがスマホの横幅の2倍だったら左半分だけが表示されている状態になり右半分はスマホの外に出ている状態になります。
テーブル要素に対してwidth:100%を設定しているのはスマホの外にはみ出しているテーブル要素を囲んでいるボックスの横幅にテーグル要素も合わせているわけです。
これでテーブル要素もスマホの外にはみ出している状態になりスクロールバーが表示されます。
overflow: autoがキモですね。
white-space: nowrap
これは「テキストの折り返しをしない」という設定で改行をしていないテキストはそのままで表示されます。
次にスクロールバーをカスタマイズします。
.scroll::-webkit-scrollbar{ /*スクロールバー全体*/
height: 5px;
}
.scroll::-webkit-scrollbar-track{ /*スクロールバーの軌道*/
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb { /*スクロールバーの動く部分*/
background: #BCBCBC;
}
「スクロールバーのサイズ」を設定。
「スクロールバーの軌道」と「スクロールバーの動く部分」の色を設定。
「スクロールバーの動く部分」とは持ち手というか掴んで動かす部分のことです。
CSS自体はホントシンプルですね。
まとめ
実はテーブル要素を囲むボックスを追加しないでテーブル要素自体にoverflow: autoをやっても横スクロールは出来るのですが内容物によってテーブルレイアウトが崩れるのでテーブル要素を囲むボックスを追加しています。
最初の方で書きましたがこのサイトはワードプレステーマ「Cocoon」を使っているので自動でテーブル要素を囲むボックスを生成するようになっていて今回のような設定をわざわざしなくてもいいのですが、「Cocoon」などのテーマを使っていない方は今回の方法を参考になさってください。
以上「スマホのテーブルが横スクロール対応になるCSS」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。