Sticky Table Headers

Feature Request
,
1

Would be nice to have a simple way to achieve sticky table headers. I found a thread with some suggestions but none of them seem to work.

I have a couple tables that could have 150 records in them and it would be nice to have a sticky table header. I have tried this from ChatGPT and applied the class to my table but no luck.

<style>
        /* Custom CSS for sticky table header */
        .sticky-table-header th {
            position: sticky !important;
            top: 10;
        }
</style>
2

Try

<div class="container">
    <div class="row">
        <div class="col">
            <div class="">
                <table class="table table-striped w-100">
                    <thead class="sticky-top">
                        <tr>
                            <th>First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" id="repeat1" dmx-bind:repeat="150">
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

image
image2560×1438 269 KB

4 Likes
3

Thanks @ben that worked great!

1 Like