横長の表のモバイル端末における処理
table-responsive
横長の表はスマートフォンなどでは幅が足りず困りものです。
二列程度ならグリッドシステムで段落ちさせれば良いですが、項目が多い場合はこれを指定しておくと、幅が足りなくなれば自動で横スクロールバーが付きます。
モバイルのと銘打っていますが、パソコンでも幅た足りなくなれば横スクロールバーが表示されます。
| texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext |
| texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="table-responsive"> <table class="table table-bordered table-striped"> <tbody> <tr> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> </tr> <tr> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> <td>texttexttexttexttexttexttext</td> </tr> </tbody> </table></div> |
領域の幅以上にデータがあるため、パソコンでも横スクロールバーが表示される
| texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext |
| texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext | texttexttexttexttexttexttext |