UNITS

🇺🇸 Document Snippets Themes GitHub Twitter

テーブル

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>