こちらのサイトで、スマホで見た際、テーブルがうまく表示されないということで、記事にしました。
スマホで見ると表がうまく表示されない......！！ショックすぎる......！！だ、だれか......ヘルプミー。
— つじもん (@tsujim0n) 2016年5月5日
マンフロットのカメラ用ミニ三脚を購入！コンパクトなので持ち運びにおすすめ！！ https://t.co/BkQhaKn8xU
ページを開くと、tableがスマホ画面をはみ出て、画面が横揺れします。
横揺れの原因
これから解説するコードを追加することで、
となります。
まず、横揺れの原因は、下のコードで色が付いている部分です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<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;"> 360度</td> </tr> </tbody> </table> |
width を設定している場合、スマホで見たら、うまく表示されないことがあります。720pxの横幅全体を表示出来ない場合、画面からはみ出ます。
修正法
では、具体的な修正法です。
◆STEP1
まず、テーブル全体を<div class="scroll">?</div>で囲みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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;"> 360度</td> </tr> </tbody> </table> </div> |
◆STEP2
読み込まれるcssファイルへ以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* テーブルを横スクロール */ .scroll{ overflow: auto; white-space:nowrap; } .scroll::-webkit-scrollbar{ height:10px; } .scroll::-webkit-scrollbar-track{ background: #F1F1F1; } .scroll::-webkit-scrollbar-thumb { background: #BCBCBC; } |
慣性スクロールならこちら
|
1 2 3 4 5 6 |
.scroll{ overflow-x: scroll; overflow-y: hidden; white-space:nowrap; -webkit-overflow-scrolling: touch; } |
以上。
これで、tableがはみ出ることなく、tableを横スクロール可能となります。
【参考サイト】
http://webcommu.net/phone-table-scroll/
