#22 Bootstrapの各機能まとめ3 [Tables]

##2 Bootstrapの各機能まとめ3 [Tables]

Bootstrapを機能毎にまとめて行きます。
今回は第3弾として今回はTablesをまとめます。

前回まで

前回はNavbar, Dropdown, Containersの機能を中心にまとめました。

1. Tables

Tablesの使い方として、<Table>タグに基本形クラス.tableを追加した上で任意でオプションを付けていきます。

1. Variants

表、表の行、表の項目等に色を付けることができます。

<!-- 表全体に色を付ける 例) 青色 -->
<table class="table table-primary"></table>

<!-- 表の行に色を付ける 例) 緑色 -->
<tr class="table table-success"></tr>

<!-- 表の項目に色を付ける 例) 赤色 -->
<td class="table table-Danger"></td>
<th class="table table-Danger"></th>

2. Striped rows

tabel-stripedを追加することで縞模様を表現することができます。

<!-- 縞模様 -->
<table class="table table-striped"></table>

<!-- 縞模様(黒色) -->
<table class="table table-dark table-striped"></table>

3. Hoverable rows

table-hoverを追加することでマウスが乗っている際にホバー状態になる

<table class="table table-hover"></table>

4. Table borders

table-borderedを追加することでテーブルとセルの四方に境界線をつけることができる

<!-- 境界線の作成 -->
<table class="table table-bordered"></table>

<!-- 境界線の作成(青線) -->
<table class="table table-bordered border-primary"></table>

<!-- 境界線の削除 -->
<table class="table table-borderless"></table>

5. Responsive tables

table-responsiveを追加することで一定のブレークポイントを超えるとスクロールバーが表示される

<!-- 全てのブレークポイントでスクロールバー表示 -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<!-- 576以下でスクロールバー表示 -->
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<!-- 768以下でスクロールバー表示 -->
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<!-- 992以下でスクロールバー表示 -->
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<!-- 1200以下でスクロールバー表示 -->
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<!-- 1400以下でスクロールバー表示 -->
<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>