Bootstrap4に用意されているクラス【table編】

基本

table

<table> に基本クラス .table を付けるとベースの表が表示されます。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９ 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">見出し１</th>
      <th scope="col">見出し２</th>
      <th scope="col">見出し３</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>項目１</td>
      <td>項目２</td>
      <td>項目３</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>項目４</td>
      <td>項目５</td>
      <td>項目６</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>項目７</td>
      <td>項目８</td>
      <td>項目９</td>
    </tr>
  </tbody>
</table>

table-dark

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９ 
<table class="table table-dark">
  ...
</table>

thead-light　thead-dark

.thead-light または .thead-dark クラスを <thead> に利用することもできます。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９
# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９ 
<table class="table">
  <thead class="thead-dark">
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

ストライプ

.table-striped を付けると<tbody> の中のテーブル行が交互に色付きます。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９ 
<table class="table table-striped">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

ボーダー

table-bordered

.table-bordered を付けるとテーブルとセルの全ての横にラインが表示されます。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 項目９
4 項目１０ 項目１１ 
<table class="table table-bordered">
  ...
</table>

マウスオーバーで背景色の変更

table-hover

.table-hover を付けると<tbody> の中のテーブル行をマウスオーバーすると背景色が変わるようになります。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 
<table class="table table-hover">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

テーブル（小）

table-sm

.table-sm を付けると行間の狭いテーブルになります。※.table-condensedはなくなりました。

# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 
<table class="table table-sm">
  ...
</table>

背景色の変更

テーブルの行<tr>やセル<th> <td>に色をつけることができます。

Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content 
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

キャプション

<caption> タグを付けることもできます。

ここにキャプションが入ります。
# 見出し１ 見出し２ 見出し３
1 項目１ 項目２ 項目３
2 項目４ 項目５ 項目６
3 項目７ 項目８ 
<table class="table">
  <caption>ここにキャプションが入ります。</caption>
  <thead>
  ...  
  </thead>
  <tbody>
  ...
  </tbody>
</table>

レスポンシブなテーブル

table-responsive

.table-responsive でレスポンシブなテーブルを作ることができます。

# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 
<table class="table table-responsive">
  ...
</table>

ブレークポイント　table-responsive-**

# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell 
<table class="table table-responsive-sm">
  ...
</table>

<table class="table table-responsive-md">
  ...
</table>

<table class="table table-responsive-lg">
  ...
</table>

<table class="table table-responsive-xl">
  ...
</table>

関連記事