How To Make A Table Cell To Stick On Top And Most Left Side Of Table At Same Time?

I have created table with sticky header using position property position:sticky; top:0;initially and then overwriting it for the first in first column using position:sticky; **l

Solution 1:

Keep z-index only for that cell:

.tableFixHeadtheadth:nth-child(1) {
  z-index: 1;
}

.tableFixHead {
  overflow-y: auto;
  max-height: 300px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 100px;
}

.tableFixHeadtheadth {
  position: sticky;
  top: 0;
}


.tableFixHead,
.tableFixHeadtd {
  box-shadow: inset 1px -1px#293033;
}

.tableFixHeadth {
  box-shadow: inset 1px1px#293033, 01px#293033;
}

table {
  border-spacing: 0;
   font-size: 14px;
}

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;
  background: 
    linear-gradient(#041230, #041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat, 
    red;
}

.tableFixHeadtheadth:nth-child(1) {
  color: #66FCF1;
  left: 0;
  background: 
    linear-gradient(#041230, #041230) center/calc(100% - 2px) calc(100% - 2px) no-repeat, 
    red;
  z-index: 1; /* added */
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><linkrel="stylesheet"type="text/css"href="resCSS.css"><divclass="container"><divclass="tableFixHead"><tableclass="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><tr><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 3</td><td>row 1, cell 4</td><td>row 1, cell 5</td><td>row 1, cell 6</td><td>row 1, cell 7</td><td>row 1, cell 8</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td><td>row 2, cell 4</td><td>row 2, cell 5</td><td>row 2, cell 6</td><td>row 2, cell 7</td><td>row 2, cell 8</td></tr><tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td><td>row 3, cell 4</td><td>row 3, cell 5</td><td>row 3, cell 6</td><td>row 3, cell 7</td><td>row 3, cell 8</td></tr><tr><td>row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td><td>row 4, cell 5</td><td>row 4, cell 6</td><td>row 4, cell 7</td><td>row 4, cell 8</td></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 3</td><td>row 1, cell 4</td><td>row 1, cell 5</td><td>row 1, cell 6</td><td>row 1, cell 7</td><td>row 1, cell 8</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td><td>row 2, cell 4</td><td>row 2, cell 5</td><td>row 2, cell 6</td><td>row 2, cell 7</td><td>row 2, cell 8</td></tr><tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td><td>row 3, cell 4</td><td>row 3, cell 5</td><td>row 3, cell 6</td><td>row 3, cell 7</td><td>row 3, cell 8</td></tr><tr><td>row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td><td>row 4, cell 5</td><td>row 4, cell 6</td><td>row 4, cell 7</td><td>row 4, cell 8</td></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 3</td><td>row 1, cell 4</td><td>row 1, cell 5</td><td>row 1, cell 6</td><td>row 1, cell 7</td><td>row 1, cell 8</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td><td>row 2, cell 4</td><td>row 2, cell 5</td><td>row 2, cell 6</td><td>row 2, cell 7</td><td>row 2, cell 8</td></tr><tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td><td>row 3, cell 4</td><td>row 3, cell 5</td><td>row 3, cell 6</td><td>row 3, cell 7</td><td>row 3, cell 8</td></tr><tr><td>row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td><td>row 4, cell 5</td><td>row 4, cell 6</td><td>row 4, cell 7</td><td>row 4, cell 8</td></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 3</td><td>row 1, cell 4</td><td>row 1, cell 5</td><td>row 1, cell 6</td><td>row 1, cell 7</td><td>row 1, cell 8</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td><td>row 2, cell 4</td><td>row 2, cell 5</td><td>row 2, cell 6</td><td>row 2, cell 7</td><td>row 2, cell 8</td></tr><tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td><td>row 3, cell 4</td><td>row 3, cell 5</td><td>row 3, cell 6</td><td>row 3, cell 7</td><td>row 3, cell 8</td></tr><tr><td>row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td><td>row 4, cell 5</td><td>row 4, cell 6</td><td>row 4, cell 7</td><td>row 4, cell 8</td></tr></tbody></table></div><!-- Table Dormant / Discontinued --></div><!--  container -->