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
+
+
+ # |
+ First |
+ Last |
+ Handle |
+
+
+
+
+ 1 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ 2 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ 3 |
+ Larry |
+ the 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}`.
|