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

overflow-x:auto<table>要素の周りにコンテナ要素（<div>など）を追加して、応答性を高めます。

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

<table>
... table content ...
</table>

</div>

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

を作成するこの例は、ファンシーテーブルを作成する方法を示しています。

この例は、表のキャプションを配置する方法を示しています。

Property	Description
border	Sets all the border properties in one declaration
border-collapse	Specifies whether or not table borders should be collapsed
border-spacing	Specifies the distance between the borders of adjacent cells
caption-side	Specifies the placement of a table caption
empty-cells	Specifies whether or not to display borders and background on empty cells in a table
table-layout	Sets the layout algorithm to be used for a table