tableがスマホ表示ではみ出る問題の解決法

width:100%でもはみ出る…

tableをWebページで載せると、tableにwidth:100%でもはみ出る場合、スマホ表示で右端がはみ出し内容が表示されない場合があります。画面幅の狭いスマホで生じる悩ましい問題ですが、その原因と解決法を考えます。

考えられる原因

そもそも列が多すぎる

列が多いことで幅が広がっている場合、width:100% を設定していても限界があるため、はみ出ます。

tableのどこかに幅広のpx指定が入っている

tableのどこか、th や td で width:1000px; のようにpxをしている場合、画面幅が1000pxを超えた場合に、はみ出ます。

widthの合計が100%を超えている

tableそのものの width が100%を超えている、またはセルごとに width を設定している場合にその合計が100%を超えていると、はみ出ます。

などの原因が考えられます。

横スクロールできるようにして解決

原因によっては、tableを分割して画面幅が狭くても表示されるようにするという解決法もありますが、はみ出るのはたいていスマホ表示ということを考えると、そのために分割するという作業もあまりスマートな気がしません。

そこで、万能の解決法とは言えませんが、はみ出た場合は横スクロールできるようにするという方法を取ります。

具体的には、tableをdivで囲み、そこにoverflowを設定する方法です。

① CSSでclassを設定

CSSで適当なクラス名（ここでは table-scroll-x ）を指定。そして下記のように overflow-x:scroll; を設定します。

　.table-scroll-x{
   overflow-x:scroll;
}

これで、はみ出た場合は横方向にスクロールできるようになります。

② divでtableを囲む

作ったclassのdivで、下記のようにtableを囲みます。

<div class="table-scroll-x">
 <table>
  <thead>
   <tr>
    <th>aaa</th>
    <th>bbb</th>
   </tr>
  </thead>
 <tbody>
   <tr>
    <th>ccc</th>
    <td>ddd</td>
   </tr>
  <tr>
   <th>eee</th>
   <td>fff</td>
  </tr>
 </tbody>
</table>
</div>

これではみ出た場合に横スクロールできるようになります。

以上、tableがスマホ表示ではみ出る問題の解決法

WEBサイトのデザイン承ります

新規デザイン・構築から、既存サイトのリニューアル・改善を承ります。ご要望や公開後の運用のかたちをお聞きしながら、最適な企画・デザインをご提案します。