Bootstrap

Bootstrap 4 テーブル(table)

0 Comment0697

Bootstrap 4基本テーブル

Bootstrap 4は、.tableクラスを使用して基本テーブルのスタイルを設定します。例は次のとおりです。

実例

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

縞模様(ストライプ)のテーブル

.table-stripedクラスを追加すると、次の例に示すように、<tbody>内の行に縞(ストライプ)が表示されます。

実例

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

枠線付きのテーブル

.table-borderedクラスは、テーブルに枠線を追加できます。

実例

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

マウスがホバリング状態のテーブル

.table-hoverクラスは、テーブルの各行にマウスがホバリング効果（灰色の背景）を追加できます。

実例

<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

黒い背景のテーブル

.table-darkクラスは、テーブルに黒い背景を追加できます。

実例

<table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

黒い縞模様(ストライプ)テーブル

.table-darkクラスと.table-stripedクラスを一緒に使用して、黒い縞模様のテーブルを作成できます。

実例

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

マウスがホバリング状態―黒い背景のテーブル

.table-darkクラスと.table-hoverクラスを一緒に使用して、黒い背景のテーブルをマウスがホバリング状態に設定できます。

実例

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

意味が指定されるカラー(色)クラス

色クラスを指定することにより、テーブルの行またはセルの色を設定できます。

実例

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

次の表に、テーブルの色クラスの説明を示します。

クラス名説明
.table-primary青色：重要な操作であることを示します
.table-success緑色：許可された操作であることを示します
.table-danger赤色：危険な操作であることを示します
.table-info浅い青色：コンテンツが変更されたことを示します
.table-warningオレンジ：注意すべき操作を示します
.table-active灰色：マウスがホバリング状態であることを示します
.table-secondary灰色：内容がそれほど重要ではないことを示します
.table-light浅い灰色：テーブル行の背景色にすることができます
.table-dark深い灰色：テーブル行の背景色にすることができます

表のタイトルの色

Bootstrap v4.0.0-beta.2では、.thead-darkクラスを使用してヘッダーに黒い背景を追加し、.thead-lightクラスを使用してヘッダーに灰色の背景を追加します。

Bootstrap v4.0.0-betaでは、.thead-inverseクラスを使用してヘッダーに黒い背景を追加し、.thead-defaultクラスを使用してヘッダーに灰色の背景を追加します。

実例

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

より小さいテーブル

.table-smクラスは、内部の余白を減らすことによって、より小さいテーブルを設定するために使用されます。

実例

<table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
コードの実行結果を確認する

レスポンシブテーブル

.table-responsiveクラスは、レスポンシブテーブルを作成するために使用されます。画面の幅が992px未満の場合は水平スクロールバーが作成され、表示領域の幅が992pxを超える場合は異なる効果が表示されます（スクロールバーがありません）：

実例

<div class="table-responsive">
<table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
</table>
</div>
コードの実行結果を確認する

次のクラスで、指定した画面幅でスクロールバーを表示するように設定できます。

クラス名画面サイズ
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

実例

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
コードの実行結果を確認する
Share
Bootstrap 4テキストのレイアウト Previous post

Related Articles

Bootstrap

Bootstrap 4テキストのレイアウト
Bootstrap

Bootstrap4 Colors(カラー)
Bootstrap

Bootstrap 4 グリッドシステム(Grid system)
Bootstrap

Bootstrap 4 入門

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

DMCA.com Protection Status
© Copyright 2020-2024 https://www.ceodata.com