My table with a sticky header is giving me trouble. I initially set the position property as position:sticky; top:0;, and then tried to overwrite it for the first column using position:sticky; **left:0**;. However, the heading of column 1 remains sticky only when the previously set background color is removed. Otherwise, the text flows behind it or gets overlapped by upcoming headings. Can someone please assist me in resolving this issue?
<!DOCTYPE html>
<html>
<head>
<style>
/* CUSTOM */
.tableFixHead {
overflow-y: auto;
max-height: 300px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 100px;
/*min-height: 200px;
max-height: 500px;*/
/* min-width: 600px;*/
}
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; /*use z-index to make heading sticky on scroll with sticky column*/ }
/* 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;
font-size: 14px;
}
th {
/*
ext-align: center;*/
padding: 8px;
/*padding-left: 20px;*/
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;*/
background: linear-gradient(#041230,#041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat,
red;
}
th:nth-child(1) {
color: #66FCF1;
position: sticky !important;
left: 0 !important;
top:0 !important;
border: 1px solid red;
/* background: linear-gradient(#041230,#041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat,
red;*/
}
</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>
<th>#</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<!-- Rows go here -->
</tbody>
</table>
</div>
<!-- Table Dormant / Discontinued -->
</div><!-- container -->
</body>
</html>
https://i.sstatic.net/C3Cz5.pnghttps://i.sstatic.net/mNIw3.png