How do I stop my headers from disappearing when scrolling through the table?

Question

I have the following html code for my table

  <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="thead-dark">
                <tr>
                    <th>Expense Type</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Entry Date</th>
                    <th>Next Monitoring Date</th>
                </tr>
            </thead>

The associate css is shown below for the table above I have already attempted position sticky on the values however, this does not seem to work?

.table-container {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.table {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

.table-responsive {
    max-height: 650px;
}

th styling where I have attempted to use position sticky however, this has not worked?

.table thead th {
    position: sticky;
    top: 0;
    background-color: #F3F4F6; /* Matches the table container background */
    z-index: 10; /* Ensures the header is above table rows */
    border-bottom: 2px solid #E5E7EB;
    text-align: center;
    font-weight: bold;
    color: #374151;
}

.table tbody tr:hover {
    background-color: #F9FAFB;
    cursor: pointer;
}

Styling for the table body td

.table tbody td {
    vertical-align: middle;
    text-align: center;
}

Answer 1

I have identified the root cause being:

.table {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

specifically overflow: hidden;