賢威7.0に実装されている2種類のテーブルレイアウトのデモです。
標準テーブル
ソース
/*標準テーブル*/
<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>
レイアウト例
項目名 | 項目名 | 項目名 |
---|---|---|
項目名が入ります | 項目内容 | 項目内容 |
項目名が入ります | 項目内容 | 項目内容 |
項目名が入ります | 項目内容 | 項目内容 |
比較用テーブル
ソース
/*比較用テーブル*/
<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>
</tr>
</thead>
<tfoot>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
</table>
レイアウト例
項目内容 | 項目内容 | 項目内容 | |
---|---|---|---|
項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
賢威7.0テーブルレイアウト Tips