■テーブル:table::テーブルの基本スタイル:table

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::罫線付きテーブル:table-bordered

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::罫線無しテーブル:table-borderless

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-borderless">
    <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::テーブル thead 「thead-dark」の使用例

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::テーブル thead thead-light

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::背景色用のクラス bg-*

タイトル タイトル タイトル タイトル
なし(標準) データ データ データ
bg-primary データ データ データ
bg-success データ データ データ
bg-warning データ データ データ
bg-danger データ データ データ
bg-info データ データ データ
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし(標準)</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-primary">
        <td>bg-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-success">
        <td>bg-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-warning">
        <td>bg-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-danger">
        <td>bg-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-info">
        <td>bg-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::th,tdでbg-の背景色

th(標準) th.bg-primary
td.bg-success td.bg-warning
td.bg-danger td.bg-info
  <table class="table table-dark">
    <tr>
      <th>th(標準) </th>
      <th class="bg-primary">th.bg-primary</th>
    </tr>
    <tr>
      <td class="bg-success">td.bg-success</td>
      <td class="bg-warning">td.bg-warning</td>
    </tr>
    <tr>
      <td class="bg-danger">td.bg-danger </td>
      <td class="bg-info">td.bg-info</td>
    </tr>
  </table>
  
■テーブル:table::テーブル trの背景色 table-

背景色用のクラス タイトル タイトル タイトル
なし(標準) データ データ データ
table-active データ データ データ
table-primary データ データ データ
table-secondary データ データ データ
table-success データ データ データ
table-danger データ データ データ
table-warning データ データ データ
table-info データ データ データ
table-light データ データ データ
table-dark データ データ データ
<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>
      <td>なし(標準)</th>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-active">
      <td>table-active</th>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-primary">
      <td>table-primary</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-secondary">
      <td>table-secondary</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-success">
      <td>table-success</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-danger">
      <td>table-danger</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-warning">
      <td>table-warning</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-info">
      <td>table-info</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-light">
      <td>table-light</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr class="table-dark">
      <td>table-dark</td>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
  </tbody>
</table>
■テーブル:table::th,tdの背景色用 table-

th(標準) table-active
table-primary table-secondary
table-success table-danger
table-warning table-info
table-light table-dark
  <table class="table">
    <tr>
      <td>th(標準) </th>
      <td class="table-active">table-active</th>
    </tr>
    <tr>
      <td class="table-primary">table-primary</td>
      <td class="table-secondary">table-secondary</td>
    </tr>
    <tr>
      <td class="table-success">table-success </td>
      <td class="table-danger">table-danger</td>
    </tr>
    <tr>
      <td class="table-warning">table-warning</td>
      <td class="table-info">table-info</td>
    </tr>
    <tr>
      <td class="table-light">table-light </td>
      <td class="table-dark">table-dark</td>
    </tr>
  </table>
■テーブル:table::テーブルの色の反転 table-dark

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-dark">
    <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::テーブル行のマウスオーバー表示 table table-hover

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-hover">
    <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-hover table-dark">
    <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::縞模様のテーブル

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-striped">
    <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">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::テキストが折り返さないように設定するクラスtable

文字の途中で折り返しをしない設定 折り返しても良い
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">文字の途中で折り返しをしない設定</th>
      <td>折り返しても良い</td>
    </tr>
  </table>
  
■テーブル:table::テーブル table-sm

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
<table class="table table-sm">
  <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">タイトル</th>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr>
      <th scope="row">タイトル</th>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
    <tr>
      <th scope="row">タイトル</th>
      <td>データ</td>
      <td>データ</td>
      <td>データ</td>
    </tr>
  </tbody>
</table>
■テーブル:table::レスポンシブテーブル:table-responsive

タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-sm未満

レスポンシブ対応テーブル(画面幅sm未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-sm mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅sm未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-md未満

レスポンシブ対応テーブル(画面幅md未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ

  <div class="table-responsive-md mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅md未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-lg未満

レスポンシブ対応テーブル(画面幅lg未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-lg mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅lg未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-xl未満

レスポンシブ対応テーブル(画面幅xl未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-xl mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅xl未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>