I have a table popping up in the middle of the screen (position: absolute) and I want, when scrolling down, the title and the thead to stick and the tbody to scroll. I managed to make the title (tag h1) and the thead to stick but the tbody, when scrolling down, starts going up toward the start of the div container of the table, overlapping title and thead.
.table_container {
display:block; //when popped up
position: absolute;
z-index: 100;
height: 490px;
width: 50%;
top: 40%;
left: 10%;
overflow: auto;
.table_container .table thead {
position: sticky;
top: 40px;
left: 0;
}
h1 {
text-align: center;
position: sticky;
top: 0;
left: 0;
}<div class="table_container">
<h1>title</h1>
<table class="table">
<thead>
<tr><th>Operation</th><th>Date</th><th>Time</th></tr>
</thead>
<tbody>
<tr><td>ADD Request</td><td>2023/7/4</td><td>17:26:42</td></tr>
<tr><td>MOD Request</td><td>2023/7/18</td><td>0:3:8</td></tr>
<tr><td>DEL Request</td><td>2023/7/8</td><td>10:55:38</td></tr>
...
</tbody>
</table>
</div>The tbody does scroll down but the rows initially go up overlapping everything, then when they reach the start of the div box they vanish like they should do right away before overlapping everything. How can I fix this?
2
Answers
The problem was solved simply adding a background color to the title and the thead, since the tbody was underlapping them when scrolling and needed to be covered up.