Table
mod-table--01
上ににテーブルの見出しがくるタイプのテーブル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
見出しのセルを結合したいときのサンプルです。border-rightとborder-leftを打ち消すクラスを付けてボーダーを消します。またセルのカラーを設定するクラスを追加しています。
gray
| TH: テーブルダミータイトル | ||
|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
black
| TH: テーブルダミータイトル | ||
|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
テーブルサブタイトルなどがある場合
テーブルタイトル
テーブルサブタイトル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | Link Text: Dummy Dummy |
| テーブルセクションタイトル | ||
| td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | TD: Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy |
mod-table--02
左にテーブルの見出しがくるタイプのテーブル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | TH: テーブルダミータイトル |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
テーブルサブタイトルなどがある場合
テーブルタイトル
テーブルサブタイトル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | TH: テーブルダミータイトル |
| テーブルセクションタイトル | |||
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
mod-table--02 large
大きいテーブルについては mod-table-largeクラスを付与してください。このクラスを付与することでuseragent1判定を行い、モバイル端末から閲覧したときにはフォントサイズを小さくして表組を見やすく調整することができます。
テーブルタイトル
テーブルサブタイトル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|---|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| テーブルセクションタイトル | ||||||
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
mod-table--scroll
テーブルをスクロール仕様にしたい場合はmod-table--scrollクラスを付与してください
テーブルタイトル
テーブルサブタイトル
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | TH: テーブルダミータイトル | |
|---|---|---|---|---|---|---|
| TH: テーブルダミータイトル | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |
| テーブルセクションタイトル | ||||||
| TH: テーブルダミータイトル | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト | td: テーブルセルダミーテキスト |