diff --git a/scss/_tables.scss b/scss/_tables.scss index 276521a387fe..f122944ee86b 100644 --- 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 index cfe25b528fa8..a8df23ddcac1 100644 --- 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 index 3d3583c376fa..72ff11588fd0 100644 --- 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 `` 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 >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
4MarkOtto@mdo
5JacobThornton@fat
6Larry the Bird@twitter
7MarkOtto@mdo
8JacobThornton@fat
9Larry 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}`.