CSS レスポンシブテーブル

レスポンシブテーブル

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

ファーストネーム	ラストネーム	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント
ジル	スミス	50	50	50	50	50	50	50	50	50	50	50	50
イブ	ジャクソン	94	94	94	94	94	94	94	94	94	94	94	94
アダム	ジョンソン	67	67	67	67	67	67	67	67	67	67	67	67

レスポンシブにするために、<table>要素の周囲にoverflow-x:autoを指定したコンテナ要素(<div>など)を追加します。

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

注：OS X Lion(Macの場合)では、スクロールバーはデフォルトで非表示になっており、使用時のみ表示されます("overflow:scroll"が設定されていても)。

おしゃれなテーブルを作る
この例は、派手なテーブルを作成する方法を示しています。

テーブルキャプションの位置を設定する
この例は、テーブルキャプションを配置する方法を示しています。

プロパティ	説明
border	1 つの宣言ですべてのborderプロパティを設定します。
border-collapse	表の境界線を折りたたむかどうかを指定します。
border-spacing	隣接するセルの境界線間の距離を指定します。
caption-side	テーブルキャプションの配置を指定します。
empty-cells	表の空のセルに境界線と背景を表示するかどうかを指定します
table-layout	テーブルに使用するレイアウトアルゴリズムを設定します