Bootstrapテーブルクラスまとめ

シンプルなtableクラスをつけた表示【table】

<table class="table">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

<table class="table table-sm">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

table-smクラスを追加すると各項目が小さくなる。padding領域も狭くなる。

ボーダーとホバー【table-bordered】【table-hover】

<table class="table table-bordered table-hover">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

枠線を表示するtable-borderedとマウスをホバーしたときにポインターののっている行の色をかえるtable-hoverクラスの表示

背景色を変更する【table-{color}】

<table class="table table-dark">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

<table class="table table-light">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

<table class="table table-dark">
  --------
  <td class="bg-light" style="color: black;">う～た</td>

テーブルの一部の背景色を変える【bg-{color}】

NO	名前	性別
1	う～た	♂
2	レサ子	♀

テーブルの背景色をtable-darkで暗くして、テーブル内の１行目（テーブルヘッドを除く）の名前の背景色をbg-lightで明るくしています。

見やすくするために文字色を単独で黒に変更しています。

テーブルヘッダーの色を変更する【thead-{color}】

<table class="table">
    <thead class="thead-dark">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

<table class="table">
    <thead class="thead-light">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

行の背景色を交互に変更する【table-striped】

<table class="table table-dark table-striped">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

<table class="table table-light table-striped">

NO	名前	性別
1	う～た	♂
2	レサ子	♀

テーブルをレスポンシブで横スクロール可能にする【table-responsive】

<table class="table table-responsive">