mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 16:50:00 +02:00
add .sticky-thead support
This commit is contained in:
committed by
Julien Déramond
parent
e20cc0d660
commit
65d976cfba
@@ -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}`.
|
||||
|
Reference in New Issue
Block a user