diff options
| author | Mark Otto <[email protected]> | 2020-03-24 02:00:45 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-03-24 10:00:45 +0100 |
| commit | 4ccd522a764ef54d20651ede5ae84492922bcd98 (patch) | |
| tree | 706bd6d37749d0c425e15ae130960a1dc7301d3e /site | |
| parent | 64a5987cc0927f4d1efecb7e1407d3bc3d6c23af (diff) | |
| download | bootstrap-4ccd522a764ef54d20651ede5ae84492922bcd98.tar.xz bootstrap-4ccd522a764ef54d20651ede5ae84492922bcd98.zip | |
Add `.caption-top` for tables (#30435)
* Move caption-side to <table> element in Reboot
* Add class for .caption-top
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/4.3/content/tables.md | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index d5dc98347..c13a24517 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -683,6 +683,42 @@ A `<caption>` functions like a heading for a table. It helps users with screen r </table> {{< /example >}} +You can also put the `<caption>` on the top of the table with `.caption-top`. + +{{< example >}} +<table class="table caption-top"> + <caption>List of users</caption> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{{< /example >}} + ## Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`. |