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

コンテナ要素（<div>など）を追加しますoverflow-x:auto<table> 要素を囲み、レスポンシブにします。

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

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

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

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

財産	説明
国境	1 つの宣言ですべての境界プロパティを設定します
ボーダー崩壊	表の境界線を折りたたむかどうかを指定します
ボーダー間隔	隣接するセルの境界線間の距離を指定します
キャプション側	テーブルキャプションの配置を指定します
空のセル	表の空のセルに境界線と背景を表示するかどうかを指定します
テーブルレイアウト	テーブルに使用するレイアウトアルゴリズムを設定します

人気オンラインプログラミングスクールランキング

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細