賢威8では、初期段階でいくつかのテーブル用のデザインを用意しています。
次のものは標準のテーブルです。
| 見出し1 | テーブルデータ1 |
|---|---|
| 見出し2 | テーブルデータ2 |
| 見出し3 | テーブルデータ3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tbody> <tr> <th>見出し1</th> <td>テーブルデータ1</td> </tr> <tr> <th>見出し2</th> <td>テーブルデータ2</td> </tr> <tr> <th>見出し3</th> <td>テーブルデータ3</td> </tr> </tbody> </table> |
「見出し1、2、3（thタグ）」の横幅の設定などは、汎用クラスの「w15」等を使うと便利です。
| 見出し1 | テーブルデータ1 |
|---|---|
| 見出し2 | テーブルデータ2 |
| 見出し3 | テーブルデータ3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tbody> <tr> <th class="w15">見出し1</th> <td>テーブルデータ1</td> </tr> <tr> <th>見出し2</th> <td>テーブルデータ2</td> </tr> <tr> <th>見出し3</th> <td>テーブルデータ3</td> </tr> </tbody> </table> |
以下はレスポンシブ用のテーブルです。
1つ目はモバイルで見たときに見出しとデータ部分がたてに並ぶデザインサンプルです。
classに「table-block」を指定します。
| 見出し1 | テーブルデータ1 |
|---|---|
| 見出し2 | テーブルデータ2 |
| 見出し3 | テーブルデータ3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table class="table-block"> <tbody> <tr> <th>見出し1</th> <td>テーブルデータ1</td> </tr> <tr> <th>見出し2</th> <td>テーブルデータ2</td> </tr> <tr> <th>見出し3</th> <td>テーブルデータ3</td> </tr> </tbody> </table> |
2つ目はモバイルで見ると、見出し部分が非表示となり、テーブルデータの横に見出しが表示されるようになるものです。
<th>に設定している見出しの内容と<td>に設定しているdata-th属性を一致させるかたちで実現しています。
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| テーブルデータ1-1 | テーブルデータ1-2 | テーブルデータ1-3 |
| テーブルデータ2-1 | テーブルデータ2-2 | テーブルデータ2-3 |
| テーブルデータ3-1 | テーブルデータ3-2 | テーブルデータ3-3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="table-list"> <thead> <tr> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> </tr> </thead> <tbody> <tr> <td data-th="見出し1">テーブルデータ1-1</td> <td data-th="見出し2">テーブルデータ1-2</td> <td data-th="見出し3">テーブルデータ1-3</td> </tr> <tr> <td data-th="見出し1">テーブルデータ2-1</td> <td data-th="見出し2">テーブルデータ2-2</td> <td data-th="見出し3">テーブルデータ2-3</td> </tr> <tr> <td data-th="見出し1">テーブルデータ3-1</td> <td data-th="見出し2">テーブルデータ3-2</td> <td data-th="見出し3">テーブルデータ3-3</td> </tr> </tbody> </table> |
3つ目はモバイルで見た時もPCと同じように表示し、はみ出る部分をスライドすることで確認できるようにするスタイルです。
tableを<div class=”table-scroll”></div>で括ります。
| 項目名 | 項目名 | |
|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="table-scroll"> <table style="width: 500px;"> <thead> <tr> <th></th> <th>項目名</th> <th>項目名</th> </tr> </thead> <tbody> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> </tbody> </table><!--標準のテーブル--> </div><!--はみ出した分横にスクロールするスタイル--> |
なお、テーブルの初期デザインは、以下のクラスを追加することで（ある程度）解除することが可能です。
テーブルに装飾を入れたくない場合に利用してください。
| 見出し1 | テーブルデータ1 |
|---|---|
| 見出し2 | テーブルデータ2 |
| 見出し3 | テーブルデータ3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tbody class="table_no-style"> <tr> <th>見出し1</th> <td>テーブルデータ1</td> </tr> <tr> <th>見出し2</th> <td>テーブルデータ2</td> </tr> <tr> <th>見出し3</th> <td>テーブルデータ3</td> </tr> </tbody> </table> |
