ブラウザの幅を狭めたり広げたりしてご確認ください。
【 TABLE 0】
| 列見出し1 | 列見出し2 | 列見出し3 | |
|---|---|---|---|
| 行見出し1 | 列1行1 内容 | 列2行1 内容 | 列3行1 内容 |
| 行見出し2 | 列1行2 内容 | 列2行2 内容 | 列3行2 内容 |
| 行見出し3 | 列1行3 内容 | 列2行3 内容 | 列3行3 内容 |
レスポンシブ対応 テーブル
【 TABLE 1】
| 列見出し1 | 列見出し2 | 列見出し3 | |
|---|---|---|---|
| 行見出し1 | 列1行1 内容 | 列2行1 内容 | 列3行1 内容 |
| 行見出し2 | 列1行2 内容 | 列2行2 内容 | 列3行2 内容 |
| 行見出し3 | 列1行3 内容 | 列2行3 内容 | 列3行3 内容 |
【 TABLE 2】
色違い
| 列見出し1 | 列見出し2 | 列見出し3 | |
|---|---|---|---|
| 行見出し1 | 列1行1 内容 | 列2行1 内容 | 列3行1 内容 |
| 行見出し2 | 列1行2 内容 | 列2行2 内容 | 列3行2 内容 |
| 行見出し3 | 列1行3 内容 | 列2行3 内容 | 列3行3 内容 |
【 TABLE 3】
| 商品AAA | 商品BBB | |
|---|---|---|
| カテゴリー1 | ||
| 行見出し1 | カテゴリー1商品AAA行1 内容 | カテゴリー1商品BBB行1 内容 |
| 行見出し2 | カテゴリー1商品AAA行2 内容 | カテゴリー1商品BBB行2 内容 |
| 行見 出し3 |
カテゴリー1商品AAA行3 内容 | カテゴリー1商品BBB行3 内容 |
| カテゴリー２ | ||
| 行見出し4 | カテゴリー2商品AAA行4 内容 | カテゴリー2商品BBB行4 内容 |
| 行見出し5 | カテゴリー2商品AAA行5 内容 | カテゴリー2商品BBB行5 内容 |
【 TABLE 4】
スマホなど幅狭モニタなど、テーブルの幅がモニタ幅からはみ出す場合、横スクロールが出るTable
結局これが一番見やすいかも…(^^;
| 列見出し1 | 列見出し2 | 列見出し3 | 列見出し4 | 列見出し5 | 列見出し6 | |
|---|---|---|---|---|---|---|
| 行見出し1 | 列1行1 内容 | 列2行1 内容 | 列3行1 内容 | 列4行1 内容 | 列5行1 内容 | 列6行1 内容 |
| 行見出し2 | 列1行2 内容 | 列2行2 内容 | 列3行2 内容 | 列4行2 内容 | 列5行2 内容 | 列6行2 内容 |
| 行見出し3 | 列1行3 内容 | 列2行3 内容 | 列3行3 内容 | 列4行3 内容 | 列5行3 内容 | 列6行3 内容 |