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

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>

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

　全く同じ表を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>

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

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

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