Freeze Headers and Columns - SOLVED!

API & Customization Show & Tell
1

While solutions for freezing headers have been posted before, I was never able to find a working method for freezing columns… Thanks to chatGPT and half a day’s worth of trial and error, I got it to work!

Here’s the CSS code that I have in the Custom CSS section:

/*==================STICKY HEADERS========================*/
thead {
  position:sticky;
  top:0px;
  z-index:7;
}

/* Sticky Headers - Repeat for each table you want a Sticky Header */

/* Fixtures */
#view_518 .kn-table-wrapper {
max-height: 750px;
}

/* Operations */
#view_635 .kn-table-wrapper {
max-height: 750px;
}

/* Manager View */
#view_575 .kn-table-wrapper {
max-height: 750px;
}


/*===========Freeze first column Operations=========*/

#view_635 th:first-child,
#view_635 td:first-child {
  position: sticky;
  left: 0;
  z-index: 6; /* Increase z-index to be higher than the header */
  background-color: #f9f9f9;
  border-right: 1px solid #ddd;
}


/*===========Freeze first two columns Fixtures=========*/
#view_518 th:first-child, #view_518 th:nth-child(2),
#view_518 td:first-child, #view_518 td:nth-child(2) {
  position: sticky;
  z-index: 6; /* Increase z-index to be higher than the header */
  background-color: #f9f9f9;
  border-right: 1px solid #ddd;
}

#view_518 th:first-child, #view_518 td:first-child {
  left: 0;
}

#view_518 th:nth-child(2), #view_518 td:nth-child(2) {
  left: calc(100px + 1px);
}
10 Likes
2

Thanks for the research and posting :+1:

1 Like
3

Do you have a solution for freezing Footers? Thanks!

4

Hi

ZiadQs solution didn’t work properly for me as the frozen column’s data hid the column header when scrolling vertically. This variation of the code froze the column and allowed the frozen column’s data to “scroll under” the column header.

#view_1153 thead {
display:table-header-group;
z-index: 2;
}
#view_1153 th:first-child,
#view_1153 tbody tr > :first-child {
position: sticky;
z-index: 1;
left: 0;
background: #ddd;
}

Dean