【Bootstrap:4】テーブルのカスタマイズ

テーブル表示

テーブルはtable,thead,tfoot,tbody,tr,th,td,タグを使用。
その際tableタグのクラス名にtableをつけtておく。

テーブルの表をストライプにするにはtableタグのクラス名にtable-stripedを付け加える。

表の列ごとの区切り線を付け加えるならtableタグのクラス名にtable-borderedを付け加える。

選択した行にアクティブカラーを表示するにはtableタグのクラス名にtable-hoverを付け加える。

<table class="table">
  <thead>
    <tr>
      <th>通常のテーブル</th>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
    </tr>
    <tr>
      <td>2</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
    </tr>
    <tr>
      <td>3</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
      <td>テーブルセル</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped">
  <thead>
    <tr>
      <th>段落毎にストライプ</th>
     ~ 略 ~
</table>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>列に区切り線追加</th>
       ~ 略 ~
</table>


<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>ホバーした行をアクティブ表示</th>
       ~ 略 ~
</table>

出力結果