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

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

技術メモ, Bootstrap4

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

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

 

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

 

基本的なテーブル

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

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

コード

 

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

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

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

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

コード

 

交互に色変える

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

 

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

コード

 

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

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

 

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

コード

 

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

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

 

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

コード

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

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

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

コード

 

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

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

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

 

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

コード

 

背景色について

背景色については先ほど書きましたが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のクラスで囲うことにより、ブレークポイントに応じて水平にスクロールされるテーブルを表示させることができます。

 

 

 

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

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
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル
セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル セル

 

 

 

 

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

関連記事

ワードプレス、管理画面の投稿一覧に最終更新日のカラムを追加
2022/09/17
ワードプレスの管理画面の投稿一覧に、最終更新日を表示させる方法です。 記事によっては何度もリライトを繰り返す場合もあります。特定の記事であれば、検索で探したり該...
WordPress管理画面 プラグインなしでカスタムフィールドを検索に含める。
2022/09/09
Wordpressの管理画面にある投稿一覧のワード検索にて、カスタムフィールドの内容をを含める方法です。カスタムフィールドを修正したいけど、記事が大量にあったり...
【WP】ワードプレスで特定のカテゴリーやアーカイブの並び順を変更する方法
2022/09/03
ワードプレスのアーカイブやカテゴリーページで、特定のカテゴリーのみ並び順を変更したい場合のやり方です。 <?php query_posts($query_...
【WP】カスタムフィールドの年月日を置き換えて日付の差分を計算
2022/08/24
ブログなどで「この記事は○年前の内容です」など表示されるのを見かけたことはありませんか? 技術や情報系の記事では、最新の情報では無いと現在では役に立たないことも...
【ワードプレス】メインループの投稿並び順を自由に変更する
2022/08/08
ワードプレスのカテゴリ一覧などを任意に並び替えて表示。最終更新日を最初に表示させたい時など状況によって表示順を変えたい時の方法です。 デフォルトでは投稿日が新し...