add .sticky-thead supportsticky-thead

3 files changed, 81 insertions, 0 deletions

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 601d86cc9f..d2287f86db 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -147,6 +147,15 @@
   @include table-variant($color, $value);
 }
 
+
+// Sticky table headers
+.thead-sticky {
+  position: sticky;
+  top: var(--#{$prefix}table-thead-sticky-top, 0);
+  z-index: $table-thead-sticky-zindex;
+}
+
+
 // Responsive tables
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 85de06fc7a..1f487203d9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -687,6 +687,8 @@ $table-striped-columns-order: even !default;
 
 $table-group-separator-color: currentcolor !default;
 
+$table-thead-sticky-zindex:   5 !default;
+
 $table-caption-color:         $text-muted !default;
 
 $table-bg-scale:              -80% !default;
diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md
index 577e3ef84c..499b43b0c0 100644
--- a/site/content/docs/5.1/content/tables.md
+++ b/site/content/docs/5.1/content/tables.md
@@ -657,6 +657,76 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 </table>
 {{< /example >}}
 
+## Sticky table headers
+
+Add `.thead-sticky` to a `<thead>` to make it stick to the top of the table's parent container while the `<tbody>` contents continue to scroll. Modify the `--bs-table-thead-sticky-top` CSS variable as needed to offset any sticky headers or navigation you may have.
+
+{{< example >}}
+<table class="table" style="--bs-table-thead-sticky-top: 3.375rem;">
+  <thead class="thead-sticky bg-dark text-white">
+    <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 colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+    <tr>
+      <th scope="row">4</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">5</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">6</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+    <tr>
+      <th scope="row">7</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">8</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">9</th>
+      <td colspan="2">Larry 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|-xxl}`.