Issue
In my project im creating a table that contains a sticky header and below there are scrollable data.
Every time i scroll the data the row is visible behind the sticky header.
My HTML code:
<div className='main-body'>
<div className='table-container'>
<table>
<thead>
<tr>
<th>Id</th>
<th>VM Name</th>
<th>OS</th>
<th>VM Status</th>
<th>Expiration Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{virtualMachines.map((vm) => (
<tr key={vm.id}>
<td>{vm.id}</td>
<td>{vm.vmName}</td>
<td>{vm.os}</td>
<td>{vm.status}</td>
<td>{vm.expirationDate}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
My CSS code:
.main-body {
background: lightskyblue;
height: 80vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.table-container {
position: absolute;
background-color: white;
border-radius: 6px;
padding: 25px;
border: 1px solid lightgray;
min-height: 0%;
max-height: 90%;
overflow: auto;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
background-color: white;
}
thead th {
padding: 1rem 2rem;
text-transform: uppercase;
letter-spacing: normal;
font-size: 1rem;
}
tbody td {
padding: 1rem 2rem;
}
I tried to create the header and the body of the table in different containers but made the two parts not aligning properly.
Any ideas how can i fix this issue?
Solution
<div className='main-body'>
<div className='table-container'>
<table>
<thead>
<!-- Header content -->
</thead>
<tbody>
<!-- Body content -->
</tbody>
</table>
</div>
</div>
CSS:
.main-body {
background: lightskyblue;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
.table-container {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
thead th,
tbody td {
padding: 1rem 2rem;
text-align: center;
white-space: nowrap;
}
thead th {
position: sticky;
top: 0;
background-color: white;
z-index: 2;
}
tbody td {
background-color: white;
}
Answered By - fati seddigh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.