スマホでtableがうまく表示されない場合

http://manuke.jp/manfrotto/

こちらのサイトで、スマホで見た際、テーブルがうまく表示されないということで、記事にしました。

スマホで見ると表がうまく表示されない……！！ショックすぎる……！！だ、だれか……ヘルプミー。

マンフロットのカメラ用ミニ三脚を購入！コンパクトなので持ち運びにおすすめ！！ https://t.co/BkQhaKn8xU

— つじもんスプラトゥーン！ (@iTsujimon) 2016年5月5日

ページを開くと、tableがスマホ画面をはみ出て、画面が横揺れします。

横揺れの原因

これから解説するコードを追加することで、

修正前　→　修正後（tableを横スクロール可能）

となります。

まず、横揺れの原因は、下のコードで色が付いている部分です。

<table style="height: 460px; width: 720px;">
  <tbody>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">コレクション/シリーズ</td>
      <td style="width: 465px; height: 24px;">PIXI ミニ三脚</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">値段（2016年5月現在）</td>
      <td style="width: 465px; height: 24px;">￥3,868（Amazon）</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">カラー展開</td>
      <td style="width: 465px; height: 24px;">3色（ブラック,ホワイト,レッド）</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">素材</td>
      <td style="width: 465px; height: 24px;">アルミニウム, テクノポリマー</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">格納高</td>
      <td style="width: 465px; height: 24px;">20cm</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">全伸高</td>
      <td style="width: 465px; height: 24px;">20cm</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">最低高</td>
      <td style="width: 465px; height: 24px;">10cm</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">最大耐荷重</td>
      <td style="width: 465px; height: 24px;">2.5kg</td>
    </tr>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">重量</td>
      <td style="width: 465px; height: 24px;">260g</td>
    </tr>
    <tr style="height: 24.8125px;">
      <td style="width: 239px; height: 24.8125px;">パン回転角度</td>
      <td style="width: 465px; height: 24.8125px;">&#160;360度</td>
    </tr>
  </tbody>
</table>

width を設定している場合、スマホで見たら、うまく表示されないことがあります。720pxの横幅全体を表示出来ない場合、画面からはみ出ます。

修正法

では、具体的な修正法です。

◆STEP1

まず、テーブル全体を<div class=”scroll”>～</div>で囲みます。

<div class="scroll">
<table style="height: 460px; width: 720px;">
  <tbody>
    <tr style="height: 24px;">
      <td style="width: 239px; height: 24px;">コレクション/シリーズ</td>
      <td style="width: 465px; height: 24px;">PIXI ミニ三脚</td>
    </tr>
～～～～
    <tr style="height: 24.8125px;">
      <td style="width: 239px; height: 24.8125px;">パン回転角度</td>
      <td style="width: 465px; height: 24.8125px;">&#160;360度</td>
    </tr>
  </tbody>
</table>
</div>

◆STEP2

読み込まれるcssファイルへ以下のコードを追加します。

/* テーブルを横スクロール */
.scroll{
overflow: auto;
white-space:nowrap;
}

.scroll::-webkit-scrollbar{
height:10px;
}

.scroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}

.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

以上。

これで、tableがはみ出ることなく、tableを横スクロール可能となります。

【参考サイト】
http://webcommu.net/phone-table-scroll/