Add `.caption-top` for tables (#30435)

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

* Add class for .caption-top

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4a1a16437cd1c3c0b5a7c7dff65f6f520bc53a6f..cf48352d26acffcb5dd62b709bbd7abff95c6f58 100644 (file)
--- 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 d5b3cddf213cf03422eab625875aa670c3b3e4cd..cb5fc8421519e5877cd278da2484ba1c4568dc30 100644 (file)
--- 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 d5dc983470f501f50f7303a33a78efb92fbdacb0..c13a24517a69ecd0e3bbffba0b570aa16d8757d3 100644 (file)
--- 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}`.