このページの先頭です

本文へ移動します

フッターへ移動します

メイン画像：横浜の風景

CSSテーブルサンプル

CSSテーブルサンプル

スマホ対応パターン1：左右の表配置バランス調整（テーブルヘッダーが左側で2列の場合比率 3：7）.tbl-r01

見出し（改行）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（改行）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（改行）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）

スマホ対応パターン1-2：列のバランス調整（テーブルヘッダーが上で3列の場合比率 2：4：4）.tbl-r01

見出し（改行）	見出し（改行）	見出し（改行）
内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）

スマホ対応パターン2：左右から上下に切り替わるように設定 .tbl-r02

見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）

スマホ対応パターン3：左右から上下に切り替わるように設定（4段バージョン）.tbl-r03

見出し1	見出し2	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）
見出し1	見出し2	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）
見出し1	見出し2	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）

スマホ対応パターン4：左右から上下に切り替わり、項目ごとに切り離れるように設定

見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）
見出し（スマホ用上下配置）	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）

スマホ対応パターン5-1：最後のセルだけが下に移動するように設定。.tbl-r05

見出し1	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）
見出し1	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）

スマホ対応パターン5-2：1つ目のセルの下に2つ目と3つ目を下に移動させる設定。.tbl-r05-2

見出し1	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）
見出し1	内容（コンテンツ）内容（コンテンツ）内容（コンテンツ）	内容（コンテンツ）

スマホ対応パターン6：表だけに横スクロールと、横スクロールの上に「※表は左右にスクロールできます。」などと表示するように設定

左右にスライドしてご確認ください

Aコース	Aコースはテキストが入ります。	Aコースはテキストが入ります。	Aコースはテキストが入ります。
Bコース	Bコースはテキストが入ります。	Bコースはテキストが入ります。	Bコースはテキストが入ります。
Cコース	Cコースはテキストが入ります。	Cコースはテキストが入ります。	Cコースはテキストが入ります。
Dコース	Dコースはテキストが入ります。	Dコースはテキストが入ります。	Dコースはテキストが入ります。

スマホ対応パターン7：大きな画面の時から横スクロールを設定(スクロールヒントも設定)

Aコース	Aコースはテキストが入ります。	Aコースはテキストが入ります。	Aコースはテキストが入ります。	Aコースはテキストが入ります。
Bコース	Bコースはテキストが入ります。	Bコースはテキストが入ります。	Bコースはテキストが入ります。	Bコースはテキストが入ります。
Cコース	Cコースはテキストが入ります。	Cコースはテキストが入ります。	Cコースはテキストが入ります。	Cコースはテキストが入ります。
Dコース	Dコースはテキストが入ります。	Dコースはテキストが入ります。	Dコースはテキストが入ります。	Dコースはテキストが入ります。