http://manuke.jp/manfrotto/

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

 

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

横揺れの原因

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

修正前 → 修正後(tableを横スクロール可能)

となります。

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

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

スポンサー

修正法

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

◆STEP1

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

◆STEP2

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

以上。

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

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

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)