WEBのこと

【CSS】スマホ表示の時にtableを横スクロールさせる最も簡単な方法

【CSS】スマホ表示の時にtableを横スクロールさせる最も簡単な方法

スマホ時やレスポンシブ時の<table>の表示のさせ方に困っている皆さん、最も簡単に横スクロールができる方法を教えます。

横スクロールを実装できるCSSを本文中に貼っておくので、コピペしてお使いください。

それでは、《【CSS】スマホ表示の時にtableを横スクロールさせる最も簡単な方法》について書いていきます。

スマホ(レスポンス)のtable表示方法について

料金表や比較表など、横に長い表を作るときのtable表示方法って悩みますよね。

短い表は、thやtdタグに「display:block」を入れて縦並びにしてあげれば良いですが、長くなるとスクロールがかなり必要になりますし。

そんな時はやはり「横スクロール」が1番スマートです。

よく見る横スクロールの実装方法として、tableをdivで囲みそこに横スクロールをさせるCSSを記述するという方法がありますが、いちいちdivで囲むのは面倒くさいですよね。

なので、今回は「tbody」に「display:table」をかけることで横スクロールを実装しています。

この方法であれば、tableをdivで囲んだりと追記する手間もなく全てのtableに適用させることができます。

「いつもtbodyなんて書いてないし何それ?」と思う方には、後ほど簡単に説明するので先にCSSをみていきましょう。

tableをスマホ表示時に横スクロールさせるCSS

IZ
IZ
下記をコピペしてCSSファイルに貼り付けるだけで実装できるぞ!

広告

tbodyについて

普段何気なく使っているtableですが、実は3つに分けられます。

ヘッダ : <thead>〜</thead>

ボディ : <tbody>〜</tbody>

フッタ : <tfoot>〜</tfoot>

<tbody>は省略をしても良いタグなので記述していない人の方が多いと思いますが、ソースを見てみると表示されています。

省略されているだけで存在しているタグなので、CSSを指定してあげればかかります。

このtableのボディ(中身)であるtbodyにCSSを適用させることで、横スクロールを実装しました。

tableにスクロールバーをつける方法

tableの最下部にスクロールバーをつけて、「スクロールできます」とアピールをすることで読者も「ここはスワイプできるんだな」と認識することができます。

是非こちらも記述しておきましょう。

 

横スクロールするCSSとスクロールバーを表示するCSSコピペはこちら

広告

スマホ表示時にtableを横スクロールさせる方法まとめ

本記事では、《【CSS】スマホ表示の時にtableを横スクロールさせる最も簡単な方法》について書いてきました。

僕はこの方法が圧倒的に簡単だと思っていますが、これより簡単な方法があったら是非教えてください。

▼わからないことはteratailで聞くのがおすすめです▼

プログラミングでわからないことは無料のteratailで質問!使い方、登録方法を解説
プログラミングでわからないことは無料のteratailで質問!使い方、登録方法を解説エンジニアのための無料質問サイト【teratail(テラテイル)】をご存知ですか? プログラミングでの悩み事や困ったことはテラテイ...