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 | |
| 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
| -rw-r--r-- | scss/_reboot.scss | 2 | ||||
| -rw-r--r-- | scss/_tables.scss | 7 | ||||
| -rw-r--r-- | site/content/docs/4.3/content/tables.md | 36 |
3 files changed, 44 insertions, 1 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 4a1a16437..cf48352d2 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -355,6 +355,7 @@ svg { // Prevent double borders table { + caption-side: bottom; border-collapse: collapse; } @@ -363,7 +364,6 @@ caption { padding-bottom: $table-cell-padding; color: $table-caption-color; text-align: left; - caption-side: bottom; } // 1. Matches default `<td>` alignment by inheriting `text-align`. diff --git a/scss/_tables.scss b/scss/_tables.scss index d5b3cddf2..cb5fc8421 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -31,6 +31,13 @@ // +// Change placement of captions with a class +// + +.caption-top { caption-side: top; } + + +// // Condensed table w/ half padding // 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}`. |