無料WordPressテーマ Principle

WordPressテーマ Principleの機能や使い方、及び、WordPress用レンタルサーバーに関する情報

更新情報 機能解説

tableのはみ出た部分をスクロールできるようにする方法

ver.7.3以降の機能になります。

 tableってPCとスマホとで幅が違いすぎてレスポンシブにする際に処理に困りますよね。

 Principleでははみ出た部分を横スクロールで表示するようにすることができます。

 やり方は簡単。tableタグをtable_wrapクラスを付けたタグで囲うだけです。

table_wrapクラスを付けたタグで囲うだけ

 こちらは普通のtableで作った表↓

1組2組3組4組5組
tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。

↑長い文が入っているとスマホではとても読める代物ではないと思います。

 全く同じ表をtable_wrapクラスを付けたタグで囲ってあげるだけでこうなります。↓

1組2組3組4組5組
tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。

↑多少は読みやすくなってるかなと思います。

 本当は各tableごとにwidthなんかの値を調整してあげればもっと読みやすい状態にすることはできますが、汎用的な使い方をするにはこれぐらいが限界かなと思います。

 スマホでぺちゃんこになってしまう表には是非、table_wrapクラスを使ってみて下さい。

コメントを残す




関連記事

Pick Up