How do I make a table with sticky header and responsive horizontal scroll?
Asked on Aug 03, 2025
1 Answer
To create a table with a sticky header and responsive horizontal scroll in Bootstrap 5, you can use the `table` class along with `table-responsive` for horizontal scrolling. The sticky header can be achieved using the `position: sticky` CSS property.
<!-- BEGIN COPY / PASTE -->
<div class="table-responsive">
<table class="table">
<thead class="bg-light" style="position: sticky; top: 0; z-index: 1;">
<tr>
<th scope="col">#</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `table-responsive` class makes the table horizontally scrollable on smaller screens.
- The `position: sticky` and `top: 0` CSS properties keep the header fixed at the top during vertical scrolling.
- Ensure the `z-index` is set to keep the header above other content.
- You can customize the header background with the `bg-light` class or any other utility class for better visibility.