テーブル
uc-table
クラスを指定することで、テーブルのスタイルを適用させます。
1. 基本
基本となるテーブルのスタイルを適用させます。
ID | Name | Summary |
---|---|---|
001 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
002 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
003 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
<table class="uc-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
<tr>
<td>002</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
<tr>
<td>003</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
</tbody>
</table>
2. 横幅を最大値に設定
_col-full
クラスを指定することで、テーブルの横幅を最大値に設定することができます。
ID | Name | Summary |
---|---|---|
001 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
002 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
003 | Test field | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium. |
<table class="uc-table _col-full">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
<tr>
<td>002</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
<tr>
<td>003</td>
<td>Test field</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
</tr>
</tbody>
</table>