百宝箱

メニュー

リスポンシブなテーブルの作成方法を学びます。

画面が小さすぎて全てのコンテンツを表示できない場合、リスポンシブなテーブルは水平スクロールバーを表示します。

ブラウザのウィンドウサイズを調整して効果を確認してください:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67

リスポンシブなテーブルを作成するために、<table>の外に含む overflow-x:auto のコンテナ要素：

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

注意：OS X Lion（Mac 上）では、スクロールバーはデフォルトで非表示で、使用時にのみ表示されます（「overflow:scroll」やautoが設定されていても同じです）。