diff options
Diffstat (limited to 'site/content/docs')
| -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}`. |