add .sticky-thead support

twbs · Jul 15, 2024 · 65d976c · 65d976c
1 parent e20cc0d
commit 65d976c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -154,6 +154,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
@@ -762,6 +762,8 @@ $table-striped-columns-order: even !default;
 
 $table-group-separator-color: currentcolor !default;
 
+$table-thead-sticky-zindex:   5 !default;
+
 $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
 $table-bg-scale:              -80% !default;

diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
@@ -661,6 +661,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: 4rem;">
+  <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}`.