Bootstrap Vue Table Component
Documentation and examples for opt-in styling of tables.
On this page
Overview
Due to the widespread use of <CTable> elements across third-party widgets like calendars and date pickers, Bootstrap Vue's tables are opt-in. All table styles are not inherited in Bootstrap Vue, meaning any nested tables can be styled independent from the parent.
Using the most basic table Bootstrap Vue, here's how <CTable>-based tables look in Bootstrap Vue.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Variants
Use contextual classes 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 |
<CTable> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">Default</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="primary"> <CTableHeaderCell scope="row">Primary</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="secondary"> <CTableHeaderCell scope="row">Secondary</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="success"> <CTableHeaderCell scope="row">Success</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="danger"> <CTableHeaderCell scope="row">Danger</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="warning"> <CTableHeaderCell scope="row">Warning</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="info"> <CTableHeaderCell scope="row">Info</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="light"> <CTableHeaderCell scope="row">Light</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow color="dark"> <CTableHeaderCell scope="row">Dark</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Accented tables
striped rows
Use striped property to add zebra-striping to any table row within the <CTableBody>.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable striped> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
These classes can also be added to table variants:
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable color="dark" striped> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable color="success" striped> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Hoverable rows
Use hover property to enable a hover state on table rows within a <CTableBody>.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable hover> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable color="dark" hover> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
These hoverable rows can also be combined with the striped variant:
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable striped hover> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Active tables
Highlight a table row or cell by adding a active property.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow active> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2" active>Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable color="dark"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow active> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2" active>Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Table borders
Bordered tables
Add bordered property for borders on all sides of the table and cells.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable bordered> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Border color utilitiesopen in new window can be added to change colors:
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable bordered border-color="primary"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Tables without borders
Add borderless property for a table without borders.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable borderless> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable color="dark" borderless> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Small tables
Add small property to make any <CTable> more compact by cutting all cell padding in half.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable small> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Vertical alignment
Table cells of <CTableHead> are always vertical aligned to the bottom. Table cells in <CTableBody> inherit their alignment from <CTable> and are aligned to the the top by default. Use the align property 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 demonsCTableRowate 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 demonsCTableRowate 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 demonsCTableRowate how the vertical alignment works in the preceding cells. |
<CTable align="middle" reponsive> <CTableHead> <CTableRow> <CTableHeaderCell scope="col" class="w-25">Heading 1</CTableHeaderCell> <CTableHeaderCell scope="col" class="w-25">Heading 2</CTableHeaderCell> <CTableHeaderCell scope="col" class="w-25">Heading 3</CTableHeaderCell> <CTableHeaderCell scope="col" class="w-25">Heading 4</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell> <CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell> <CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell> <CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell> </CTableRow> <CTableRow align="bottom"> <CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell> <CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell> <CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell> <CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell> </CTableRow> <CTableRow> <CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell> <CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell> <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell> <CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
| # | Class | Heading | Heading | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | ||||||||||||
| |||||||||||||||
| 3 | Larry the Bird | ||||||||||||||
<CTable striped> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell colspan="4"> <CTable> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">Header</CTableHeaderCell> <CTableHeaderCell scope="col">Header</CTableHeaderCell> <CTableHeaderCell scope="col">Header</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">A</CTableHeaderCell> <CTableDataCell>First</CTableDataCell> <CTableDataCell>Last</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">B</CTableHeaderCell> <CTableDataCell>First</CTableDataCell> <CTableDataCell>Last</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">C</CTableHeaderCell> <CTableDataCell>First</CTableDataCell> <CTableDataCell>Last</CTableDataCell> </CTableRow> </CTableBody> </CTable> </CTableHeaderCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Anatomy
Table head
Similar to tables and dark tables, use the modifier prop color="light" or color="dark" to make <CTableHead>s appear light or dark gray.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<CTable> <CTableHead color="light"> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Larry</CTableDataCell> <CTableDataCell>the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<CTable> <CTableHead color="dark"> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Table foot
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| Footer | Footer | Footer | Footer |
<CTable> <CTableHead color="light"> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> <CTableHead> <CTableRow> <CTableDataCell>Footer</CTableDataCell> <CTableDataCell>Footer</CTableDataCell> <CTableDataCell>Footer</CTableDataCell> <CTableDataCell>Footer</CTableDataCell> </CTableRow> </CTableHead> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Captions
A <CTableCaption> 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.
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<CTable> <CTableCaption>List of users</CTableCaption> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Larry</CTableDataCell> <CTableDataCell>the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
You can also put the <CTableCaption> on the top of the table with caption="top".
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<CTable caption="top"> <CTableCaption>List of users</CTableCaption> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Class</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Mark</CTableDataCell> <CTableDataCell>Otto</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Jacob</CTableDataCell> <CTableDataCell>Thornton</CTableDataCell> <CTableDataCell>@fat</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Larry</CTableDataCell> <CTableDataCell>the Bird</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a responsive property. Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive="{-sm|-md|-lg|-xl|-xxl}".
| # | 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 |
<CTable responsive> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| # | 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 |
<CTable responsive="sm"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| # | 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 |
<CTable responsive="md"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| # | 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 |
<CTable responsive="lg"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| # | 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 |
<CTable responsive="xl"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| # | 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 |
<CTable responsive="xxl"> <CTableHead> <CTableRow> <CTableHeaderCell scope="col">#</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> <CTableHeaderCell scope="col">Heading</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> <CTableRow> <CTableHeaderCell scope="row">1</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">2</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> <CTableRow> <CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> <CTableDataCell>Cell</CTableDataCell> </CTableRow> </CTableBody> </CTable> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
API
CTable
import { CTable } from '@coreui/bootstrap-vue' // or import CTable from '@coreui/bootstrap-vue/src/components/table/CTable' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| align | Set the vertical aligment. | string | 'bottom', 'middle', 'top' | - |
| border-color | Sets the border color of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | |
| bordered | Add borders on all sides of the table and cells. | boolean | - | |
| borderless | Remove borders on all sides of the table and cells. | boolean | - | |
| caption | Put the <caption> on the top of the table. | string | 'top' | - |
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string | |
| hover | Enable a hover state on table rows within a <CTableBody>. | boolean | - | |
| responsive | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | boolean|string | boolean, 'sm', 'md', 'lg', 'xl', 'xxl' | - |
| small | Make table more compact by cutting all cell padding in half. | boolean | - | |
| striped | Add zebra-striping to any table row within the <CTableBody>. | boolean | - |
CTableBody
import { CTableBody } from '@coreui/bootstrap-vue' // or import CTableBody from '@coreui/bootstrap-vue/src/components/table/CTableBody' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
CTableDataCell
import { CTableDataCell } from '@coreui/bootstrap-vue' // or import CTableDataCell from '@coreui/bootstrap-vue/src/components/table/CTableDataCell' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | Highlight a table row or cell. | boolean | - | |
| align | Set the vertical aligment. | string | 'bottom', 'middle', 'top' | - |
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
CTableFoot
import { CTableFoot } from '@coreui/bootstrap-vue' // or import CTableFoot from '@coreui/bootstrap-vue/src/components/table/CTableFoot' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
CTableHead
import { CTableHead } from '@coreui/bootstrap-vue' // or import CTableHead from '@coreui/bootstrap-vue/src/components/table/CTableHead' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
CTableHeaderCell
import { CTableHeaderCell } from '@coreui/bootstrap-vue' // or import CTableHeaderCell from '@coreui/bootstrap-vue/src/components/table/CTableHeaderCell' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
CTableRow
import { CTableRow } from '@coreui/bootstrap-vue' // or import CTableRow from '@coreui/bootstrap-vue/src/components/table/CTableRow' 1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | Highlight a table row or cell.. | boolean | - | |
| align | Set the vertical aligment. | string | 'bottom', 'middle', 'top' | - |
| color | * Sets the color context of the component to one of Bootstrap Vue’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |