I am trying to set up a table that has a fixed header when scrolling up and a fixed first column when scrolling left. I have applied 'position: sticky' with 'top:0' for the header and 'left:0' for the first column. However, I am facing issues where the header text gets covered on scroll-up and the border of the sticky column disappears on scroll left. Can someone assist me in resolving this problem?
<!DOCTYPE html>
<html>
<head>
<style>
/* CUSTOM */
.tableFixHead {
overflow-y: auto;
max-height: 300px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 100px;
}
.tableFixHead thead th { position: sticky; top: 0; }
/* Borders */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #293033;
}
.tableFixHead th {
box-shadow: inset 1px 1px #293033, 0 1px #293033;
}
table {
border-spacing: 0;
}
th {
padding: 8px;
color: #e9ecef;
background-color: #1e2324;
font-weight: 500;
font-size: 14px;
}
thead{
text-align: center;
}
td {
background-color: #041230;
text-align: center;
padding: 10px;
color: #e9ecef;
min-width: 150px;
font-size: 13px;
word-spacing: 2px;
}
td:nth-child(1) {
min-width: 50px;
max-width: 50px;
font-weight: bold;
color: #66FCF1;
position: sticky;
left: 0;
border: 1px solid red;
}
.fix-table
{
/* margin-top: 100px;*/
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">
</head>
<body>
<div class="container">
<div class="tableFixHead">
<table class="tablecolor2">
<thead>
<tr>
// Remaining HTML content would go here
</tr>
</thead>
<tbody>
// Remaining HTML content would go here
</tbody>
</table>
</div>
</div>
</body>
</html>