Tables

Documentation and examples for opt-in styling of tables.

Overview

Add the base class .Table to any Table, then extend with our optional modifier classes or custom styles.

All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Using the most basic table markup, here's how Table component-based tables look in Bootstrap.

# 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

Use theme attribute to color tables, table rows or individual cells.

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

Use striped attribute to add zebra-striping to any table row within the Tbody component.

# 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>

These classes can also be added to table 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

Add hover to enable a hover state on table rows within a Tbody component.

# 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>

These hoverable rows can also be combined with the striped variant:

# 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

Highlight a table row or cell by adding a active class.

# 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

Add bordered attribute for borders on all sides of the table and cells.

# 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 can be added to change colors:

# 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

Add borderless attribute for a table without borders.

# 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

Add small attribute to make any Table component more compact by cutting all cell padding in half.

# 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

Table cells of Thead are always vertical aligned to the bottom.

Table cells in Tbody inherit their alignment from Table and are aligned to the top by default.

Use the vertical align attribute to re-align where needed.

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

Border styles, active styles, and table variants are not inherited by nested tables.

# 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

Similar to tables and dark tables, use the modifier attributes light or dark to make Theads appear light or dark gray.

# 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

A Caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

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>

You can also put the Caption on the top of the table with caption="top" attribute.

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

Responsive tables allow tables to be scrolled horizontally with ease.

Make any table responsive across all viewports by wrapping a Table cp, with responsive attribute.

Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive={sm|md|lg|xl|xxl}.

Always responsive

Across every breakpoint, use responsive attrobute for horizontally scrolling tables.

# 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

attribute as needed to create responsive tables up to a particular breakpoint.

From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

# 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