無料WordPressテーマ Principle

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

更新情報 機能解説

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

WordPress専用レンタルサーバー人気No.1 → ConoHa WING

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

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

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

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

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

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

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

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

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

<div class="table_wrap">
  <table>
    <tr><th>1組</th><th>2組</th><th>3組</th><th>4組</th><th>5組</th></tr>
    <tr><td>tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。</td><td>tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。</td><td>tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。</td><td>tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。</td><td>tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。</td></tr>
  </table>
</div>
1組 2組 3組 4組 5組
tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。 tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。 tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。 tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。 tableの中に長い文章を入れると画面からはみ出たりぺちゃんこになったりして読みにくくなります。

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

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

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

おすすめサーバー

第1位ConoHa WING

どこよりもハイスペックで、どこよりも安いという異次元のコスパ。しかもワードプレスに特化されていて扱いやすい!現状では文句の付けようがない圧倒的No.1

第2位シン・レンタルサーバー

レンサバ業界の老舗とも言える安定のエックスサーバーが打ち出した新サービス!業界震撼のコスパはまさに新時代の幕開け!

第3位 MixHost

サーバースペックへのこだわりは随一、コスパも◎、利用者急上昇中の新世代レンタルサーバーです!

参考【徹底比較】ConoHa WING 対 エックスサーバー

参考【徹底比較】ConoHa WING 対 mixhost

参考【徹底比較】エックスサーバー 対 MixHost

コメントを残す




関連記事

Pick Up