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で暗くして、テーブル内の1行目(テーブルヘッドを除く)の名前の背景色を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">
NO 名前 性別
1 パブロ・ディエゴ・ホセ・フランシスコ・デ・パウラ・ファン・ネポムセーノ・マリア・デ・ロス・レメディオス・クリスピン・クリスピアーノ・デ・ラ・サンティシマ・トリニダード・ルイス・イ・う~た
2 レサ子
まとめ
  • table
  • table-sm
  • table-bordered
  • table-hover
  • table-color
  • table-striped
  • table-responsive
タイトルとURLをコピーしました