方法-レスポンシブテーブル
レスポンシブテーブルを作成する方法を学びます。
レスポンシブテーブル
画面が小さすぎてコンテンツ全体を表示できない場合、レスポンシブテーブルには水平スクロールバーが表示されます。ブラウザウィンドウのサイズを変更して、効果を確認します。
ファーストネーム | 苗字 | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント | ポイント |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ジル | スミス | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
イブ | ジャクソン | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
アダム | ジョンソン | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
レスポンシブテーブルを作成するにoverflow-x:auto
は、<table>の前後にコンテナ要素を追加します。
例
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
注: OS X Lion(Macの場合)では、スクロールバーはデフォルトで非表示になっており、使用時にのみ表示されます(「overflow:scroll」またはautoが設定されている場合でも)。
ヒント:テーブルのスタイルを設定する方法の詳細については、 CSSテーブルのチュートリアルにアクセスしてください。