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 `
# | +First | +Last | +Handle | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry the Bird | +||
4 | +Mark | +Otto | +@mdo | +
5 | +Jacob | +Thornton | +@fat | +
6 | +Larry the Bird | +||
7 | +Mark | +Otto | +@mdo | +
8 | +Jacob | +Thornton | +@fat | +
9 | +Larry the Bird | +