ホーム > >

Bootstrap 4 テーブル(table)

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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>

コメントを残す

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