コピペOK！Luxeritas(ルクセリタス)のtableを横スクロールさせるCSS

2019年2月8日2019年11月24日

高速無料テーマとして評判の高いルクセリタスですが、カスタマイズ記事は少ないのでここではtable（表）の幅が広いブログのためのカスタマイズを調べてみましたので参考にしてみてください。

table（表）もスマホユーザーの読者が増えるようになって、色々カスタマイズが必要なので面倒と言えば面倒ですね。まあ愚痴をこぼしても仕方ないので、色々調べてたどり着いたので紹介していきます。

Contents

1. テーブルのCSS
- 1.1. スマホのみスクロールさせる方法
2. まとめ

テーブルのCSS

下記がルクセリタスのtableを横スコロールさせるCSSです。コピペで利用してください。

table{overflow:auto;white-space:nowrap;display:block;width:auto}
table::-webkit-scrollbar{height:5px}
table::-webkit-scrollbar-track{background:#d3d3d3}
table::-webkit-scrollbar-thumb{background:#bcbcbc}

色はカラーチャートなどを使い、お好みで指定してもらえばいいと思います。

結果画像

テーブル（表）の下段にスクロールバーが付いています。これでぎゅうぎゅうだったテーブルもスマホユーザーにとって見やすい結果となりましたね。

意外にパソコンで記事を書いてそのあとスマホで表示を確認するのを忘れる人も多いと思うので、なるべく記事を投稿したらスマホでも結果をチェックしておきましょう。

スマホのみスクロールさせる方法

パソコン表示は問題ないけど、スマホだけルクセリタスのtableを横スコロールさせるCSSも紹介しておきます。

@media screen and (max-width:399px){table{overflow:auto;white-space:nowrap;display:block;width:auto}table::-webkit-scrollbar{height:5px}table::-webkit-scrollbar-track{background:#d3d3d3}table::-webkit-scrollbar-thumb{background:#bcbcbc}}
@media screen and (max-width:768px){table{overflow:auto;white-space:nowrap;display:block;width:auto}table::-webkit-scrollbar{height:5px}table::-webkit-scrollbar-track{background:#d3d3d3}table::-webkit-scrollbar-thumb{background:#bcbcbc}}
@media screen and (max-width:480px){table{overflow:auto;white-space:nowrap;display:block;width:auto}table::-webkit-scrollbar{height:5px}table::-webkit-scrollbar-track{background:#d3d3d3}table::-webkit-scrollbar-thumb{background:#bcbcbc}}

ここも色はお好みで変更してみてください。あとはクラス指定などをして、任意の表だけスクロールもチャレンジしてみましょう。