2017/11/16  Bootstrap4  ,

基本

table

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

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">見出し1</th>
      <th scope="col">見出し2</th>
      <th scope="col">見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>項目1</td>
      <td>項目2</td>
      <td>項目3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>項目4</td>
      <td>項目5</td>
      <td>項目6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>項目7</td>
      <td>項目8</td>
      <td>項目9</td>
    </tr>
  </tbody>
</table>

table-dark

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<table class="table table-dark">
  ...
</table>

thead-light thead-dark

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

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<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
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<table class="table table-striped">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

ボーダー

table-bordered

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

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
4 項目10 項目11
<table class="table table-bordered">
  ...
</table>

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

table-hover

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

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8
<table class="table table-hover">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

テーブル(小)

table-sm

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

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8
<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
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8
<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>