作成
css:tableがスマホの画面からはみ出る→横スクロール対応
PCでは奇麗に表示できてる tableが、スマホでは はみ出してしまってる場合は、以下のようにCSSをあてるとtableが横スクロールできるようになります。 ###source (css) .tbl { width:100%; } .tbl_scroll { overflow: auto; white-space: nowrap; } /* ↓はなくても良い */ .tbl_scroll::-webkit-scrollbar { height: 10px; } .tbl_scroll::-webkit-scrollbar-track { background: #eee; } .tbl_scroll::-webkit-scrollbar-thumb { background: #ddd;} ###memo table を div(.tbl_scroll) で囲みます。 ###source (html) <div class="tbl_scroll"> <table class="tbl"> <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> </table> </div>
wakatta 記法
投稿の仕方
基本的な記法
エンジニア向け記法
記法のサンプル
このコンテンツを見る
