.net column
.NET開発者のためのブログメディア

Bootstrapにおけるtableの使い方は?テーブル全体の背景色やヘッダ部のみの背景色を指定

2020年12月04日

SE
Bootstrapにおけるtableの使い方について知りたいです。
PM
テーブル全体の背景色やヘッダ部のみの背景色を指定する方法などを説明しますので、一緒に見ていきましょう。

Bootstrapにおけるtableの使い方とは?


今回は、Bootstrapにおけるtableの使い方について説明します。そして、テーブル全体の背景色やヘッダ部のみの背景色を指定する方法を紹介のほかに、ストライプテーブルやボーダーテーブル、ホバーテーブルについても紹介します。

Bootstrapにおけるtableの使い方に興味のある方はぜひご覧ください。

テーブルの基本

<table> に .table クラスを指定すると、Bootstrapのテーブルとなります。

 

See the Pen
bootstrap_table1
by kskumd (@kskumd)
on CodePen.

このように、<table> に .table クラスを指定すると、Bootstrapのテーブルとなります。

テーブル全体の背景色指定

Bootstrapでは、<table> に .table-* クラスを指定すると、テーブル全体の背景色を変更できます。

 

See the Pen
bootstrap_table2
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapでは<table> に .table-* クラスを指定すると、テーブル全体の背景色を変更できます。

テーブルヘッダの背景色変更

Bootstrapでは、thead-* を指定すると、ヘッダの背景色を変更できます。

 

See the Pen
bootstrap_table3
by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではthead-* を指定すると、ヘッダの背景色を変更できます。

ストライプテーブル

Bootstrapでは、table-striped を指定すると、ストライプテーブルになります。

 

See the Pen
bootstrap_table4
by kskumd (@kskumd)
on CodePen.

ボーダーテーブル

Bootstrapでは、table-bordered を指定すると、ボーダー(枠線)付きのテーブルになります。
table-borderless を指定すると、ボーダーなしのテーブルになります。

 

See the Pen
bootstrap_table5
by kskumd (@kskumd)
on CodePen.

ホバーテーブル

Bootstrapでは、table-hover を指定すると、行にマウスオンした場合に背景色を変更します。

 

See the Pen
bootstrap_table6
by kskumd (@kskumd)
on CodePen.

SE
Bootstrapにおけるtableの使い方についてよく理解できました。
PM
テーブル全体の背景色や、ヘッダ部のみの背景色を指定する方法などが理解できたら、実際にソースコードで指定してみましょう。

まとめ

いかがでしたでしょうか。Bootstrapにおけるtableの使い方について説明してきました。

テーブル全体の背景色や、ヘッダ部のみの背景色を指定する方法を紹介しました。また、ストライプテーブルやボーダーテーブル、ホバーテーブルについても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs