Tables
Documentation and examples for opt-in styling of tables.
On this page
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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<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 theme="primary">
<b-th scope="row">
Primary
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="secondary">
<b-th scope="row">
Secondary
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="success">
<b-th scope="row">
Success
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="danger">
<b-th scope="row">
Danger
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="warning">
<b-th scope="row">
Warning
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="info">
<b-th scope="row">
Info
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="light">
<b-th scope="row">
Light
</b-th>
<b-td>Cell</b-td>
<b-td>Cell</b-td>
</b-tr>
<b-tr theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table
striped
theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table
striped
theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table
hover
theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table
borderless
theme="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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<template>
<b-table
small
theme="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. |
<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 | Mark | Otto | @mdo | ||||||||||||
| |||||||||||||||
| 3 | Larry | the Bird | |||||||||||||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
<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-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.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<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 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<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>