CSS sticky columns

[richarddunnebsc]

I have a table with 10 columns. I want the header row, first three columns and the last column sticky.
I have managed to get the header row and first column sticky with the code below.

table{
    table-layout: fixed;
    width: 100%;
    height: 100%;
    
}

table thead tr th{
    width: 150px;
}

table tbody tr td{
    text-align: center;
}

thead tr > th {
    background:#ccc;
    position: sticky;
    padding:.5rem;
    z-index:1;
    top: 0;
  }
 
  thead tr > :first-child,
  thead tr > :last-child {
    z-index:2;
    left:0;
    top:0;
  }
 
  td {
    text-align:center;
  }
 
  tbody tr > :first-child,
  tbody tr > :last-child {
    background:#ddd;
    position: sticky;
    z-index:3;
    left:0;
  }

I have tried using nth-child(), but to no avail.
Any help greatly appreciated

 

[tomliv]

Maybe this will help?

https://codepen.io/mikegolus/pen/jOZzRzw

 

[richarddunnebsc]

That is the codepen I was trying to tweak. It uses first-child. I tried using the nth-child instead, but not having any success with it.

 

[richarddunnebsc]

Maybe this will help?

https://codepen.io/mikegolus/pen/jOZzRzw

I got first and last sticky, just need to add two more columns, 2nd & 3rd

 

[richarddunnebsc]

Almost there, got the row header and last row sticking, but can't get the first 3 columns to stick

thead tr > th {
    background:#ccc;
    position: sticky;
    padding:.5rem;
    z-index: 3;
    top: 0;
  }
 
  thead tr > th:nth-child(-n+3),
  tbody tr > td:nth-child(-n+3)
   {
    position: sticky;
    right: 150px;
    background:#ddd;
  }
 
  td {
    text-align:center;
  }
 
  thead tr > :last-child,
  tbody tr > td:last-child {
    background:#ddd;
    position: sticky;
    right: 0;
  }

What am I missing?

 

[tomliv]

Almost there, got the row header and last row sticking, but can't get the first 3 columns to stick

  thead tr > th:nth-child(-n+3),
  tbody tr > td:nth-child(-n+3)
   {
    position: sticky;
    right: 150px;
    background:#ddd;
  }

  }

I believe this will place ALL 3 at right: 150px. You might need to do each one separately with different right values. Maybe?

 

[richarddunnebsc]

I tried that

thead tr > th:nth-child(-n+1),
  tbody tr > td:nth-child(-n+1)
   {
    position: sticky;
    right: 0;
    background:#ddd;
  }

  thead tr > th:nth-child(-n+2),
  tbody tr > td:nth-child(-n+2)
   {
    position: sticky;
    right: 150px;
    background:#ddd;
  }

  thead tr > th:nth-child(-n+3),
  tbody tr > td:nth-child(-n+3)
   {
    position: sticky;
    right: 300px;
    background:#ddd;
  }

Still not sticking.

 

[tomliv]

I messed with that pen in dev tools and adding the code seen in screenshot,, I can get what you are looking for, I think:



I added the class of sticky as well to the td s you see with inline styles