テーブル

テーブルのクラス適用例です。

Overview

Tableコンポーネントでテーブルを囲み、オプションの修飾子クラスまたはカスタムスタイルで拡張します。

すべてのテーブルスタイルがBootstrapで継承されるわけではありません。ネストされたテーブルは、親から独立してスタイルを設定できます。

基本的なテーブルマークアップを使用して、以下はBootstrapで Table コンポーネントベースのテーブルがどのように見えるかを示しています。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Variants

theme 属性を使用して、表、表の行、または個々のセルに色を付けることができます。

Class Heading Heading
Default CellCell
Primary CellCell
Secondary CellCell
Success CellCell
Danger CellCell
Warning CellCell
Info CellCell
Light CellCell
Dark CellCell
vue
<template>
 <b-table>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     Class
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     Default
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="primary">
    <b-th scope="row">
     Primary
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="secondary">
    <b-th scope="row">
     Secondary
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="success">
    <b-th scope="row">
     Success
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="danger">
    <b-th scope="row">
     Danger
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="warning">
    <b-th scope="row">
     Warning
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="info">
    <b-th scope="row">
     Info
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="light">
    <b-th scope="row">
     Light
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr color="dark">
    <b-th scope="row">
     Dark
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Accented tables

Striped rows

Tbody コンポーネント内のテーブル行に zebra-striping を追加するには、striped 属性を使用します。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table striped>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

テーブルに variants を追加することもできます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  striped
  color="dark"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  striped
  color="success"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Hoverable rows

テーブルの行が Tbody コンポーネント内でホバー状態になるように hover 属性を追加できます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table hover>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  hover
  color="dark"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

ホバリング可能な行は、縞模様のバリエーションと組み合わせることもできます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table hover>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Active tables

active 属性を追加することで、表の行やセルを強調表示します。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr active>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td
     colspan="2"
     active
    >
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table color="dark">
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr active>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td
     colspan="2"
     active
    >
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Table borders

Bordered tables

テーブルとセルの四方の境界線を指定するために bordered 属性を追加する。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table bordered>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Border color utilities を追加して色を変えることができます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  bordered
  boder-color="primary"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Tables without borders

borderless 属性を追加すると border がなくなります。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table borderless>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  borderless
  color="dark"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Small tables

Table コンポーネントをよりコンパクトにするために small 属性を追加するとセルの padding を半分にできます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table small>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table
  small
  color="dark"
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Vertical alignment

Thead のテーブルセルは常に下に垂直に配置されます。

Tbody のテーブルセルは Table からアラインメントを継承し、デフォルトでは上にアラインメントされます。

必要に応じて vertical align 属性を使って再整列してください。

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
vue
<template>
 <b-table vertical-align="middle">
  <b-thead>
   <b-tr>
    <b-th
     scope="col"
     width="25%"
    >
     Heading 1
    </b-th>
    <b-th
     scope="col"
     width="25%"
    >
     Heading 2
    </b-th>
    <b-th
     scope="col"
     width="25%"
    >
     Heading 3
    </b-th>
    <b-th
     scope="col"
     width="25%"
    >
     Heading 4
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-td>
     This cell inherits
     <code>vertical-align: middle;</code>
     from the table
    </b-td>
    <b-td>
     This cell inherits
     <code>vertical-align: middle;</code>
     from the table
    </b-td>
    <b-td>
     This cell inherits
     <code>vertical-align: middle;</code>
     from the table
    </b-td>
    <b-td>
     This here is some placeholder text, intended to take up quite a bit of
     vertical space, to demonstrate how the vertical alignment works in the
     preceding cells.
    </b-td>
   </b-tr>
   <b-tr vertical-align="bottom">
    <b-td>
     This cell inherits
     <code>vertical-align: bottom;</code>
     from the table row
    </b-td>
    <b-td>
     This cell inherits
     <code>vertical-align: bottom;</code>
     from the table row
    </b-td>
    <b-td>
     This cell inherits
     <code>vertical-align: bottom;</code>
     from the table row
    </b-td>
    <b-td>
     This here is some placeholder text, intended to take up quite a bit of
     vertical space, to demonstrate how the vertical alignment works in the
     preceding cells.
    </b-td>
   </b-tr>
   <b-tr>
    <b-td>
     This cell inherits
     <code>vertical-align: middle;</code>
     from the table
    </b-td>
    <b-td>
     This cell inherits
     <code>vertical-align: middle;</code>
     from the table
    </b-td>
    <b-td vertical-align="top">
     This cell is aligned to the top.
    </b-td>
    <b-td>
     This here is some placeholder text, intended to take up quite a bit of
     vertical space, to demonstrate how the vertical alignment works in the
     preceding cells.
    </b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Nesting

ボーダースタイル、アクティブスタイル、テーブルバリアントは、入れ子になったテーブルでは継承されません。

# First Last Handle
1 MarkOtto@mdo
Header Header Header
A FirstLast
B FirstLast
C FirstLast
3 Larrythe Bird@twitter
vue
<template>
 <b-table
  striped
  bordered
 >
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-td colspan="4">
     <b-table margin="b-0">
      <b-thead>
       <b-tr>
        <b-th scope="col">
         Header
        </b-th>
        <b-th scope="col">
         Header
        </b-th>
        <b-th scope="col">
         Header
        </b-th>
       </b-tr>
      </b-thead>
      <b-tbody>
       <b-tr>
        <b-th scope="row">
         A
        </b-th>
        <b-td>First</b-td>
        <b-td>Last</b-td>
       </b-tr>
       <b-tr>
        <b-th scope="row">
         B
        </b-th>
        <b-td>First</b-td>
        <b-td>Last</b-td>
       </b-tr>
       <b-tr>
        <b-th scope="row">
         C
        </b-th>
        <b-td>First</b-td>
        <b-td>Last</b-td>
       </b-tr>
      </b-tbody>
     </b-table>
    </b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td>Larry</b-td>
    <b-td>the Bird</b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Anatomy

Table head

表や暗い表と同様に、修飾属性 light や dark を使って Theads を明るい灰色や暗い灰色に見せることができます。

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table>
  <b-thead theme="light">
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table>
  <b-thead theme="dark">
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Table foot

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
# First Last Handle
vue
<template>
 <b-table>
  <b-thead color="light">
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
  <b-tfoot>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-tfoot>
 </b-table>
</template>

Captions

Caption コンポーネントは表の見出しのような機能を持つ。スクリーンリーダを持つユーザが表を見つけて、それが何についてのものかを理解し、それを読みたいかどうかを決めるのに役立ちます。

List of users
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table>
  <b-caption>List of users</b-caption>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

caption="top" 属性で表の一番上に Caption を置くこともできます。

List of users
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
<template>
 <b-table caption="top">
  <b-caption>List of users</b-caption>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Jacob</b-td>
    <b-td>Thornton</b-td>
    <b-td>@fat</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td colspan="2">
     Larry the Bird
    </b-td>
    <b-td>@twitter</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Responsive tables

レスポンシブテーブルを使うと、テーブルを簡単に水平方向にスクロールさせることができます。

Table コンポーネントに responsive 属性を追加することで、すべてのビューポートに対応したレスポンシブテーブルにすることができます。

あるいは、responsive={sm|md|lg|xl|xxl}を使用して、レスポンシブテーブルの最大ブレークポイントを指定します。

Always responsive

すべてのブレークポイントにおいて、水平方向にスクロールするテーブルには responsive 属性を使用します。

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 CellCellCellCellCellCellCellCellCell
2 CellCellCellCellCellCellCellCellCell
3 CellCellCellCellCellCellCellCellCell
vue
<template>
 <b-table responsive>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Breakpoint specific

特定のブレークポイントまでのレスポンシブテーブルを作成するには、必要に応じて responsive={sm|md|lg|xl|xxl} 属性を使用します。

そのブレークポイント以降では、テーブルは正常に動作し、水平方向にはスクロールしません。Use responsive={sm|md|lg|xl|xxl}

これらのテーブルは、特定のビューポート幅でレスポンシブスタイルが適用されるまで壊れているように見えることがあります。

# Heading Heading Heading Heading Heading Heading Heading Heading
1 CellCellCellCellCellCellCellCell
2 CellCellCellCellCellCellCellCell
3 CellCellCellCellCellCellCellCell
vue
<template>
 <b-table responsive="sm">
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
    <b-th scope="col">
     Heading
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     2
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
   <b-tr>
    <b-th scope="row">
     3
    </b-th>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
    <b-td>Cell</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

Extend

Colors

Head , Foot

body-secondary
# First Last Handle
1 MarkOtto@mdo
body-tertiary
# First Last Handle
1 MarkOtto@mdo
secondary
# First Last Handle
1 MarkOtto@mdo
success
# First Last Handle
1 MarkOtto@mdo
danger
# First Last Handle
1 MarkOtto@mdo
warning
# First Last Handle
1 MarkOtto@mdo
info
# First Last Handle
1 MarkOtto@mdo
light
# First Last Handle
1 MarkOtto@mdo
dark
# First Last Handle
1 MarkOtto@mdo
primary-subtle
# First Last Handle
1 MarkOtto@mdo
secondary-subtle
# First Last Handle
1 MarkOtto@mdo
success-subtle
# First Last Handle
1 MarkOtto@mdo
danger-subtle
# First Last Handle
1 MarkOtto@mdo
warning-subtle
# First Last Handle
1 MarkOtto@mdo
vue
<template>
 <b-table
  v-for="theme in themes"
  :key="theme"
  caption="top"
 >
  <b-caption>{{ theme }}</b-caption>
  <b-thead :background-color="`${theme}`">
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

<script setup>
const themes = ['body-secondary', 'body-tertiary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'primary-subtle', 'secondary-subtle', 'success-subtle', 'danger-subtle', 'warning-subtle'];
</script>

Table

body-secondary
# First Last Handle
1 MarkOtto@mdo
body-tertiary
# First Last Handle
1 MarkOtto@mdo
secondary
# First Last Handle
1 MarkOtto@mdo
success
# First Last Handle
1 MarkOtto@mdo
danger
# First Last Handle
1 MarkOtto@mdo
warning
# First Last Handle
1 MarkOtto@mdo
info
# First Last Handle
1 MarkOtto@mdo
light
# First Last Handle
1 MarkOtto@mdo
dark
# First Last Handle
1 MarkOtto@mdo
primary-subtle
# First Last Handle
1 MarkOtto@mdo
secondary-subtle
# First Last Handle
1 MarkOtto@mdo
success-subtle
# First Last Handle
1 MarkOtto@mdo
danger-subtle
# First Last Handle
1 MarkOtto@mdo
warning-subtle
# First Last Handle
1 MarkOtto@mdo
vue
<template>
 <b-table
  v-for="theme in themes"
  :key="theme"
  caption="top"
  :background-color="`${theme}`"
 >
  <b-caption>{{ theme }}</b-caption>
  <b-thead>
   <b-tr>
    <b-th scope="col">
     #
    </b-th>
    <b-th scope="col">
     First
    </b-th>
    <b-th scope="col">
     Last
    </b-th>
    <b-th scope="col">
     Handle
    </b-th>
   </b-tr>
  </b-thead>
  <b-tbody>
   <b-tr>
    <b-th scope="row">
     1
    </b-th>
    <b-td>Mark</b-td>
    <b-td>Otto</b-td>
    <b-td>@mdo</b-td>
   </b-tr>
  </b-tbody>
 </b-table>
</template>

<script setup>
const themes = ['body-secondary', 'body-tertiary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'primary-subtle', 'secondary-subtle', 'success-subtle', 'danger-subtle', 'warning-subtle'];
</script>

See Also