1. TOP
  2. >技術メモ>
  3. 【初心者の方向け】 Bootstrap4の使い方 テーブル

【初心者の方向け】 Bootstrap4の使い方 テーブル

技術メモ, Bootstrap4

2019/03/22
2022/07/21
【初心者の方向け】 Bootstrap4の使い方 テーブル

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

今回はBootstrapのテーブルの使い方を覚えてみましょう。

 

Bootstrap4のバージョン4.3をベースに書いています。

 

基本的なテーブル

<table>要素にtableクラスを使用します。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブルの背景に色をつける

<table>にtable-○○を追記することによりテーブルに背景色を指定する事ができます。

<thead>にはthead-○○で色を指定します。下のテーブルにはにtable-lightをにthread-darkにしています。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-light">
  <thead class="thead-dark">
    <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

交互に色変える

交互に色を変えるには<table>要素にtable-stripedを追加します。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3
3 内容1 内容2 内容3

コード

<table class="table table-striped">
  <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
    <th scope="row">4</th>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブル全体に罫線を付ける

<table>要素にtable-borderedでテーブルとセルのすべての辺の境界線を追加します。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-bordered">
  <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

上記とは逆に<table>要素にtable-borderlessで境界線無しになります。

これは背景色が暗くても使用可能です。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-dark table-borderless">
  <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

行をマウスオーバー時にホバーで見やすく

<table>要素にtable-hoverを追加するとホバーが有効になります。

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-hover">
  <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

テーブルを小さくコンパクトに

<table>要素にtable-smを追加することで、セル内に設定されているpaddingを半分にし

コンパクトに表示させます。

 

# 見出し1 見出し2 見出し3
1 内容1 内容2 内容3
2 内容1 内容2 内容3

コード

<table class="table table-sm">
  <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>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
    </tr>
  </tbody>
</table>

 

背景色について

背景色については先ほど書きましたがbg-○○のクラスでも指定することができます。

table-○○で指定した場合とbg-○○で指定した場合の違いは下記のようになります。

テキストの色など何も追記していない状態なので比べて見て下さい。

 

背景色のクラスを各行に指定
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

 

レスポンシブでのテーブル表示

 

<table>要素にtable-responsiveのクラスで囲うことにより、ブレークポイントに応じて水平にスクロールされるテーブルを表示させることができます。

 

<div class="table-responsive-ブレークポントを指定">
  <table class="table">
    ...
  </table>
</div>

 

 

各ブレークポイントの指定は下記のようになります。

table-responsive-sm

table-responsive-md

table-responsive-lg

table-responsive-xl

 

 

 

table-responsive-sm
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-md
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-lg
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル
table-responsive-xl
セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル

 

table-responsiveで全てのブレークポイントをまたいで

テーブルを水平にスクロールすることができます。

table-responsive
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル

 

 

 

 

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
ホームページ制作ならRU DESIGN

関連記事

ワードプレス各バージョンと使用可能なPHPバージョン一覧
2024/01/29
 WordPressのバージョンによって使用可能なPHPのバージョンは異なってきます。PHPのバージョンによっては、ワードプレスが正常に動作しなかったり、テンプ...
古いMacに「ChromeOS 」をインストールして利用
2023/10/08
 Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...
公式サポートが終了した古いMacに最新のmacOSをインストールするプロジェクト
2023/10/07
 古いMacに最新のmacOSをインストールするプロジェクト「OpenCore Legacy Patcher」(OCLP)は、Appleが提供する最新のmacO...
【WordPress】古い投稿を現在の日付で再投稿してくれるプラグイン「Republish Old Posts」
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...