Как предотвратить исчезновение заголовков при прокрутке таблицы? ⇐ CSS

[Anonymous]

У меня есть следующий HTML-код для моей таблицы




Expense Type
Description
Price
Entry Date
Next Monitoring Date



Связанный css показан ниже для приведенной выше таблицы. Я уже пытался зафиксировать положение значений, однако, похоже, это не работает?
.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;
}

том стиле, где я пытался использовать фиксированное положение, но это не сработало?
.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;
}

Стилизация тела таблицы td
.table tbody td {
vertical-align: middle;
text-align: center;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... -the-table