diff --git a/scss/_tables.scss b/scss/_tables.scss
index 601d86cc9..d2287f86d 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 85de06fc7..1f487203d 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 577e3ef84..499b43b0c 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 `` on the top of the table with `.caption-top`.
{{< /example >}}
+## Sticky table headers
+
+Add `.thead-sticky` to a `` to make it stick to the top of the table's parent container while the `` 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 >}}
+
+
+
+ | # |
+ First |
+ Last |
+ Handle |
+
+
+
+
+ | 1 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ | 2 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ | 3 |
+ Larry the Bird |
+ @twitter |
+
+
+ | 4 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ | 5 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ | 6 |
+ Larry the Bird |
+ @twitter |
+
+
+ | 7 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ | 8 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ | 9 |
+ 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|-xxl}`.