From 4ccd522a764ef54d20651ede5ae84492922bcd98 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 24 Mar 2020 02:00:45 -0700
Subject: [PATCH] Add `.caption-top` for tables (#30435)

* Move caption-side to <table> element in Reboot

* Add class for .caption-top
---
 scss/_reboot.scss                       |  2 +-
 scss/_tables.scss                       |  7 +++++
 site/content/docs/4.3/content/tables.md | 36 +++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

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 `<td>` 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 `<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}`.