# Freeze Headers and Columns - SOLVED!

**URL:** <https://forums.knack.com/t/freeze-headers-and-columns-solved/13975>\
**Category:** Show & Tell\
**Created:** [March 22, 2023, 6:16am UTC](https://forums.knack.com/t/freeze-headers-and-columns-solved/13975 "2023-03-22T06:16:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZiadQ](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@ZiadQ](https://forums.knack.com/u/ZiadQ)\
**Post date:** [March 22, 2023, 6:16am UTC](https://forums.knack.com/t/freeze-headers-and-columns-solved/13975/1 "2023-03-22T06:16:56Z")

</div>

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:

```auto
/*==================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);
}

```

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [March 22, 2023, 6:41am UTC](https://forums.knack.com/t/freeze-headers-and-columns-solved/13975/2 "2023-03-22T06:41:38Z")

</div>

Thanks for the research and posting 👍

---

<div class="post-metadata">

**Author:** ![EITS](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@EITS](https://forums.knack.com/u/EITS)\
**Post date:** [March 28, 2023, 7:27pm UTC](https://forums.knack.com/t/freeze-headers-and-columns-solved/13975/3 "2023-03-28T19:27:10Z")

</div>

Do you have a solution for freezing Footers? Thanks!

---

<div class="post-metadata">

**Author:** ![Dean2](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@Dean2](https://forums.knack.com/u/Dean2)\
**Post date:** [April 15, 2023, 5:33am UTC](https://forums.knack.com/t/freeze-headers-and-columns-solved/13975/4 "2023-04-15T05:33:53Z")

</div>

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