# Freeze container on a horizontal scroll

**URL:** <https://community.weweb.io/t/freeze-container-on-a-horizontal-scroll/8514>\
**Category:** How do I?\
**Created:** [May 8, 2024, 1:11pm UTC](https://community.weweb.io/t/freeze-container-on-a-horizontal-scroll/8514 "2024-05-08T13:11:34Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [May 13, 2024, 12:15pm UTC](https://community.weweb.io/t/freeze-container-on-a-horizontal-scroll/8514/3 "2024-05-13T12:15:36Z")

</div>

Hey @enzocarmo

> **[Column freeze — Tella](https://www.tella.tv/video/clw4xd9w604ay09l5392s66v3/view)**
>
> Video recording for work

Maybe it’s a bit late, but came up with a solution to freeze any column to the left, inside the Table component.  
I think adding `position: sticky` and `left:0` would have done the trick, but with the auto-generated wrappers, it’s not working. Fortunately, we can still add some custom styling. This worked for me (add the style to an HTML embed to preview it in the editor) :

```auto
<style>
#myTable .ww-columns.ww-object-elem > .ww-layout > div:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
}
</style>

```

You can modify the number in `nth-child(1)` to modify which column you want to freeze.  
Don’t forget to add a background-color to the corresponding cells to hide the overlapped elements.

---

_[View the full topic](https://community.weweb.io/t/freeze-container-on-a-horizontal-scroll/8514)._