# How to freeze the first column of a table

**URL:** <https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072>\
**Category:** Ask Developers\
**Created:** [September 8, 2021, 10:49am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072 "2021-09-08T10:49:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://forums.knack.com/u/Sofie)\
**Post date:** [September 8, 2021, 10:49am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/1 "2021-09-08T10:49:05Z")

</div>

Hello! I want to freeze the first column of a large table. Someone posted this question in the forum some time ago, but it stayed unanswered. Can someone support me with this?

---

<div class="post-metadata">

**Author:** ![undefinedu56669](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@undefinedu56669](https://forums.knack.com/u/undefinedu56669)\
**Post date:** [April 22, 2020, 2:31pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/2 "2020-04-22T14:31:55Z")

</div>

I see that there are ways to freeze the headers of a column, similar to how you would freeze the top row in Excel. But has anyone come up with a way to freeze the first column so it stays in place as the user scrolls to the right?

My first column is Dates. When the user gets too far to the right in looking for data, it becomes a challenge to know that they're looking at the correct row, since the Date column is no longer visible.

&nbsp;

---

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://forums.knack.com/u/Sofie)\
**Post date:** [September 8, 2021, 10:37am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/3 "2021-09-08T10:37:29Z")

</div>

I have the same question. Have you found a solution for this problem?

---

<div class="post-metadata">

**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\
**Post date:** [September 8, 2021, 1:04pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/4 "2021-09-08T13:04:26Z")

</div>

Hi @Sofie - I haven’t had a chance to try the code myself, but check out this post: [Sticky Headers for Table Views](https://forums.knack.com/t/sticky-headers-for-table-views/8810)

Hope that helps! Let me know if it does the trick.

---

<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:** [September 8, 2021, 3:54pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/5 "2021-09-08T15:54:07Z")

</div>

The code changed recently as my tables stopped being sticky 😝.  
I am now using the below code provided to me by @Johnny_Appknowledged_UK - Super simple and works well. Be aware that there is an issue with long drop down menus if they encroach into the table view.

Hopefully this will be a standard option in the future @Les 👍🚀

Add to CSS, change view\_XXXX

/_==================STICKY HEADERS========================_/  
thead {  
position:sticky;  
top:0px;  
z-index:5;  
}  
/\* Sticky Headers - Repeat for each table you want a Sticky Header _/  
 #view\_74 .kn-table-wrapper {  
max-height: 700px;  
}  
/_======END========STICKY HEADERS======END================\*/

---

<div class="post-metadata">

**Author:** ![undefinedu56669](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@undefinedu56669](https://forums.knack.com/u/undefinedu56669)\
**Post date:** [September 8, 2021, 6:53pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/6 "2021-09-08T18:53:33Z")

</div>

There was some code that I tried in the past with limited success. My understanding was that this was something Knack was working on, but nothing yet.

---

<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:** [September 12, 2021, 1:19pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/7 "2021-09-12T13:19:53Z")

</div>

Posted in wrong section 😥 - Please delete @Les

---

<div class="post-metadata">

**Author:** ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://forums.knack.com/u/Sofie)\
**Post date:** [September 16, 2021, 2:56pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/8 "2021-09-16T14:56:35Z")

</div>

Thank you!!! It works perfectly fine 🙂

---

<div class="post-metadata">

**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\
**Post date:** [November 4, 2021, 3:53pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/9 "2021-11-04T15:53:48Z")

</div>

Hi everyone! Looking for a little further help understanding the need for a sticky or frozen column in a table view. If anyone who sees this could chime in with more real-world use cases that benefit from a sticky column, that would help us out! A few other specific questions:

1. Do you anticipate freezing more than one column in a table view, if so, up to how many?
2. Would there ever be a need to freeze a column on the right side of the table? Such as in situations where an international user is consuming the data in the view from right to left?

Any other detail you can provide is appreciated at this point. Hoping to get this one off the ground soon!

---

<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:** [November 5, 2021, 6:58am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/10 "2021-11-05T06:58:02Z")

</div>

Hey @Les - good to hear that there are plans to introduce sticky columns. Does this mean that sticky headers will also be happening. I use sticky headers frequently, far more than sticky columns.

Anyway, sticky columns, or in the Excel world, “freezing columns”. The ability to freeze up to three columns on the left hand side would cover most requirements I can think of.

I avoid having tables so wide that you need to scroll horizontally, negating the need for any sticky columns. However, I do have one client that is insistent the table contains all the objects fields, so it has about 50 columns.  
In this example we have the first column sticky displaying the Product Code.

I don’t see any reason to freeze columns on the right hand side. Wide tables will always be off the screen to the right, unless you are going to shift the table and start it from the right hand side and it would then scroll left.

---

<div class="post-metadata">

**Author:** ![JonathanTack](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@JonathanTack](https://forums.knack.com/u/JonathanTack)\
**Post date:** [March 9, 2022, 4:34pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/11 "2022-03-09T16:34:59Z")

</div>

Bumping this conversation!

---

<div class="post-metadata">

**Author:** ![Barbara](https://avatars.discourse-cdn.com/v4/letter/b/5f8ce5/32.png) [@Barbara](https://forums.knack.com/u/Barbara)\
**Post date:** [April 26, 2022, 3:25am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/12 "2022-04-26T03:25:48Z")

</div>

Jessie,  
Is there any status update on creating “sticky” columns on the left side? Or like in Excel a freezing a column or header so that a key field is always visible while scrolling left to right or up and down. The Stick header disappears on me a lot, is there a reason for that? any timing on this would be appreciated.

---

<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:** [April 26, 2022, 6:04am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/13 "2022-04-26T06:04:08Z")

</div>

@Barbara - Jessie is no longer at Knack.

Given the current focus on other items I’m not sure that this is going to be forthcoming quickly. I’ve been using the sticky headers code for a couple of years and not had any issues.

CSS

```auto

/*==================STICKY HEADERS========================*/
thead {
  position:sticky;
  top:0px;
  z-index:5;
}
/* Sticky Headers - Repeat for each table you want a Sticky Header */
#view_3428 .kn-table-wrapper {
max-height: 700px;
}
/*======END========STICKY HEADERS======END================*/

```

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [August 29, 2022, 10:57pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/14 "2022-08-29T22:57:10Z")

</div>

I see a lot about how to create a sticky header but no one ever answered how to create a sticky column. Here’s the CSS for a sticky column:

```auto
tbody tr > :first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #ddd;
}

```

You can add a #view\_id or #scene\_id in front of the “tbody” to target specific views/scenes. You can also increase the number of sticky columns by increasing “first-child” to your desired number. This will replicate the spreadsheet software functionality we all love and need that allows us to Freeze Panes by Column.

PS: I find it hilarious that a Knack team member asked the community, “Why is Freeze Panes helpful?”. If you don’t know why it’s helpful then you should join my company because they have no idea either lol. But seriously, freeze panes are helpful to make data easy to read by freezing a header row or by freezing very important columns that should always be visible from the left such as Dates, Status, Names, Projects, etc:

---

<div class="post-metadata">

**Author:** ![Pablo1](https://avatars.discourse-cdn.com/v4/letter/p/958977/32.png) [@Pablo1](https://forums.knack.com/u/Pablo1)\
**Post date:** [August 30, 2022, 1:19am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/15 "2022-08-30T01:19:31Z")

</div>

Hi, Quick question about “You can also increase the number of sticky columns by increasing “first-child” to your desired number.”

I would like to stick column 1 and 2, which is the right sentence?

Rgds, Pablo.

---

<div class="post-metadata">

**Author:** ![RobertHill](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/roberthill/32/986_2.png) [@RobertHill](https://forums.knack.com/u/RobertHill)\
**Post date:** [August 30, 2022, 1:43am UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/16 "2022-08-30T01:43:25Z")

</div>

Ah, I suppose I should have explained that better. Here’s a real world example I used in my application to freeze the first and second columns of a table from a specific view in CSS:

```auto
#view_2952 tbody tr > :first-child, #view_2952 tbody tr > :nth-child(2) {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #ddd;
}

```

If you want to freeze more columns then add another comma up top and target the next column you’d like to freeze. The number 2 in the nth-child(n) selector represents the second column. We could change the number to nth-child(3) and that would freeze the third column… so on and so forth.

---

<div class="post-metadata">

**Author:** ![Pablo1](https://avatars.discourse-cdn.com/v4/letter/p/958977/32.png) [@Pablo1](https://forums.knack.com/u/Pablo1)\
**Post date:** [August 30, 2022, 1:19pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/17 "2022-08-30T13:19:05Z")

</div>

Many Thanks Robert. Very usefull.  
Rgds, Pablo

---

<div class="post-metadata">

**Author:** ![Send\_Joe](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@Send\_Joe](https://forums.knack.com/u/Send_Joe)\
**Post date:** [October 21, 2022, 11:15pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/18 "2022-10-21T23:15:02Z")

</div>

I cannot believe this was such an easy fix. Thank you so much.

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [September 29, 2023, 2:41pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/19 "2023-09-29T14:41:18Z")

</div>

Have just made a cool post for this on [Appknowledged](https://www.appknowledged.com)

With this complimentary code snippet, the first column of your table can be “pinned” or “stuck” to its initial position, remaining visible as you scroll rightward through the table. Conveniently, the code also offers functionality to “unpin” the column, allowing it to move normally with horizontal scrolling. Should you need the column pinned back, it can be easily re-stuck in place with a simple click.

> **[Sticky Table Column](https://www.appknowledged.com/mods/preview/sticky-table-column)**
>
> This code snippet provides a feature to toggle the "stickiness" of the first column in a knack table. By default, the first column is set to be "sticky", meaning it stays visible while users scroll horizontally through the table. The toggle button,...

---

<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:** [September 29, 2023, 9:24pm UTC](https://forums.knack.com/t/how-to-freeze-the-first-column-of-a-table/11072/20 "2023-09-29T21:24:36Z")

</div>

Nice addition of having a pin 📌 @Johnny_Appknowledged_UK