CSS Only Fixed Table Headers

<style> .table-container { height: 300px; overflow-y: scroll; background-color: blue; } .table-container table { width: 100%; background-color: green; } .table-container thead th { position: sticky; top: 0; background-color: #f9f9f9; } .table-container tbody{ height: 500px; } </style> <div class="table-container"> <table border> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <!-- Table body content goes here --> </tbody> </table> </div>

<style>

    .table-container {

        height: 300px;

        overflow-y: scroll;

        background-color: blue;

    }

    .table-container table {

        width: 100%;

        background-color: green;

    }

    .table-container thead th {

        position: sticky;

        top: 0;

        background-color: #f9f9f9;

    }

    .table-container tbody{

        height: 500px;

    }

</style>

<div class="table-container">

    <table border>

        <thead>

            <tr>

                <th>Header 1</th>

                <th>Header 2</th>

                <th>Header 3</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Cell 1</td>

                <td>Cell 2</td>

                <td>Cell 3</td>

            </tr>

            <!-- Table body content goes here -->

        </tbody>

    </table>

</div>