mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

add .sticky-thead support

Browse Source
This commit is contained in:
Mark Otto
2022-04-06 17:19:17 -07:00
committed by Julien Déramond
parent e20cc0d660
commit 65d976cfba
3 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_tables.scss
View File

@@ -154,6 +154,15 @@
@include table-variant($color, $value); @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 // Responsive tables
// //
// Generate series of `.table-responsive-*` classes for configuring the screen // Generate series of `.table-responsive-*` classes for configuring the screen

2
scss/_variables.scss
View File

@@ -762,6 +762,8 @@ $table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default; $table-group-separator-color: currentcolor !default;
$table-thead-sticky-zindex: 5 !default;
$table-caption-color: var(--#{$prefix}secondary-color) !default; $table-caption-color: var(--#{$prefix}secondary-color) !default;
$table-bg-scale: -80% !default; $table-bg-scale: -80% !default;

70
site/content/docs/5.3/content/tables.md
View File

@@ -661,6 +661,76 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
</table> </table>
{{< /example >}} {{< /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
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}`. 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}`.