How do I make a table with sticky header and responsive horizontal scroll?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I make a table with sticky header and responsive horizontal scroll?

Asked on Jul 22, 2025

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I make a table with sticky header and responsive horizontal scroll?

Asked on Jul 22, 2025

Answer

The Q&A Network