how to make bootstrap 4 table header sticky on top when page scroll

Question

I'm using argon dashboard by creative tim https://demos.creative-tim.com/argon-dashboard/. Now I want table header remains at the top when scrolling page. I tried using class sticky-top but it does not work.

                           <thead class="thead-light sticky-top">
                            <tr>
                                <th scope="col-2" class="sort" data-sort="name">Customer ID</th>
                                <th scope="col" class="sort" data-sort="budget">Company</th>
                                <th scope="col" class="sort" data-sort="status">Employees</th>
                                <th scope="col">Country</th>
                                <th scope="col" class="sort" data-sort="completion">Last admin login</th>
                                <th scope="col">Last employee login</th>
                                <th scope="col">Last invoice</th>
                                <th scope="col">Next invoice</th>
                                <th scope="col">Total invoiced</th>
                                <th scope="col">Status</th>
                                <th scope="col">Created</th>
                            </tr>
                            </thead>

What is the problem with the code? Anyone can do this, comment below.

Answer 1

Try fixed-top instead. It worked for me