スマホのテーブルの表示を横スクロールする ~Luxeritas~

ワードプレスのLuxeritasのテーマを使っています。

使い勝手は、今までの無料のテーマでは一番いいかなっと感じてきました。

今回は、テーブルの表示ですが、スマホで表示するとどうしてもレイアウトが崩れてしまっていました。

色々調べてみたら、スマホのテーブルを横スクロールできることを発見!
これはなかなかいいのではと思い、さっそく導入です。

導入は、左の「子テーマの編集」からか、「外観」から「テーマエディター」でfunctions.phpとstyle.cssにコピペ

参考にさせてもらったサイトは、こちら
https://nelog.jp/scrollable-table
お世話になりました。

これでスマホのテーブルの崩れていたレイアウトも、パソコンと同様の表示に。

あー良かったと思ったのですが、このままだとスクロールバーが見えないので、実際にスクロールできるのかが見た目では分かりづらいと気づきました。。

で、次に参考にさせてもらったサイトがこちら
https://mnmlike.com/how-to-be-displayed-scroll-bar-on-smart-phone/
お世話になりました。

ちなみに、class名が上記二つでは違うので、下のcssのクラス名を
「.scrollable-table」に合わせましたよ。

これで、横スクロールバーも表示出来て、きれいにテーブルが見えるようになりました。

テーブルの横スクロールバーが表示されたスマホ