diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 4a1a16437c..cf48352d26 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 `` alignment by inheriting `text-align`. diff --git a/scss/_tables.scss b/scss/_tables.scss index d5b3cddf21..cb5fc84215 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -30,6 +30,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 d5dc983470..c13a24517a 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -683,6 +683,42 @@ A `` functions like a heading for a table. It helps users with screen r {{< /example >}} +You can also put the `` on the top of the table with `.caption-top`. + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+{{< /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}`.