テーブル

見やすいデータデーブル

概要

見やすいデータテーブルは.tableクラスを追加することで使用できます。この例ではw-100クラスを使用して横幅を100%にします。

品種名 系統 花色 開花期
曜白朝顔 大輪系 青紫に白い星 7月〜9月
団十郎 変化朝顔 茶褐色 7月〜8月
桔梗咲 変化朝顔 紫 7月〜9月 
<table class="table w-100">
  <thead>
    <tr>
      <th>品種名</th>
      <th>系統</th>
      <th>花色</th>
      <th>開花期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>曜白朝顔</td>
      <td>大輪系</td>
      <td>青紫に白い星</td>
      <td>7月〜9月</td>
    </tr>
    <tr>
      <td>団十郎</td>
      <td>変化朝顔</td>
      <td>茶褐色</td>
      <td>7月〜8月</td>
    </tr>
    <tr>
      <td>桔梗咲</td>
      <td>変化朝顔</td>
      <td>紫</td>
      <td>7月〜9月</td>
    </tr>
  </tbody>
</table>