シンプルなtableクラスをつけた表示【table】
<table class="table">
<table class="table table-sm">
table-smクラスを追加すると各項目が小さくなる。padding領域も狭くなる。
ボーダーとホバー【table-bordered】【table-hover】
<table class="table table-bordered table-hover">
枠線を表示するtable-borderedとマウスをホバーしたときにポインターののっている行の色をかえるtable-hoverクラスの表示
背景色を変更する【table-{color}】
<table class="table table-dark">
<table class="table table-light">
<table class="table table-dark">
--------
<td class="bg-light" style="color: black;">う~た</td>
テーブルの一部の背景色を変える【bg-{color}】
テーブルの背景色をtable-darkで暗くして、テーブル内の1行目(テーブルヘッドを除く)の名前の背景色をbg-lightで明るくしています。
見やすくするために文字色を単独で黒に変更しています。
テーブルヘッダーの色を変更する【thead-{color}】
<table class="table">
<thead class="thead-dark">
<table class="table">
<thead class="thead-light">
行の背景色を交互に変更する【table-striped】
<table class="table table-dark table-striped">
<table class="table table-light table-striped">
テーブルをレスポンシブで横スクロール可能にする【table-responsive】
<table class="table table-responsive">
NO |
名前 |
性別 |
1 |
パブロ・ディエゴ・ホセ・フランシスコ・デ・パウラ・ファン・ネポムセーノ・マリア・デ・ロス・レメディオス・クリスピン・クリスピアーノ・デ・ラ・サンティシマ・トリニダード・ルイス・イ・う~た |
♂ |
2 |
レサ子 |
♀ |
まとめ
- table
- table-sm
- table-bordered
- table-hover
- table-color
- table-striped
- table-responsive