# How to Fix the Header of a Data Table Control Using Custom CSS

**URL:** <https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302>\
**Category:** Show and tell\
**Tags:** custom-css\
**Created:** [September 6, 2024, 11:20am UTC](https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302 "2024-09-06T11:20:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Renger](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/renger/32/5_2.png) [@Renger](https://community.yeeflow.com/u/Renger)\
**Post date:** [September 6, 2024, 11:20am UTC](https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302/1 "2024-09-06T11:20:58Z")

</div>

Hi Yeeflow community!

Today, I want to share a useful tip for those working with Data Table controls. When you have a large dataset displayed in a table, it can be challenging to keep track of the column headers while scrolling through the rows. Luckily, by using custom CSS, you can fix the header of your Data Table so it stays visible even as you scroll down the page.

**Why Fix the Table Header?**

When dealing with a large number of rows in a Data Table, it’s helpful to have the header always in view so you can easily identify the column names. By fixing the header in place, you’ll improve the readability of your data and streamline your workflow when reviewing or managing large datasets.

**Step-by-Step Guide:**

1. **Open Your Yeeflow Application:**

• Navigate to the page that contains the Data Table control you want to customize.

1. **Access the Custom CSS Section:**

• In the form/dashboard designer, select the **Data Table** control which you want to fix the header.

• From the advanced tab of the properties settings panel, Look for the **Custom CSS** section, where you can paste your custom styles.

1. **Paste the Custom CSS:**

Below is the CSS code that you can use to fix the header of the Data Table:

```auto
selector .ant-table-thead
{
    position: sticky;
    top:0px;
    z-index: 1;
}

selector .ant-table
{
    overflow: visible !important;
}

selector table
{
    overflow: visible !important;
}
selector .ant-table .ant-table-content
{
    overflow: visible !important;
}

```

1. **Test and Save:**

• Once you’ve pasted the CSS into your Yeeflow application, scroll through your Data Table to see the header remain fixed at the top of the page as you navigate the rows.

**Final Thoughts:**

This simple custom CSS can significantly enhance the usability of your Data Table, especially when you’re working with large amounts of data. By keeping the header visible at all times, you’ll have a clearer view of the data you’re working with.

Feel free to try this out and let us know how it works for you! If you have any questions or need further assistance, leave a comment below, and I’d be happy to help.

Happy customizing!

---

<div class="post-metadata">

**Author:** ![Endo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/endo/32/431_2.png) [@Endo](https://community.yeeflow.com/u/Endo)\
**Post date:** [January 27, 2025, 7:46am UTC](https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302/2 "2025-01-27T07:46:59Z")

</div>

Hi @Renger ,  
Thanks for sharing this useful tip! I’ve tried using the custom CSS code you provided, but I’m still facing an issue where the header is scrolling along with the data. Could you please advise if there’s any additional step needed to make the header stay fixed at the top while scrolling through the data rows?

Looking forward to your guidance.

Thanks!

---

<div class="post-metadata">

**Author:** ![Endo](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/endo/32/431_2.png) [@Endo](https://community.yeeflow.com/u/Endo)\
**Post date:** [January 29, 2025, 6:50am UTC](https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302/3 "2025-01-29T06:50:19Z")

</div>

![image](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/da15deaa3e3b41e8c3c702df8eebab3b3f4c7c1e.png)

---

<div class="post-metadata">

**Author:** ![Renger](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/renger/32/5_2.png) [@Renger](https://community.yeeflow.com/u/Renger)\
**Post date:** [January 30, 2025, 4:24am UTC](https://community.yeeflow.com/t/how-to-fix-the-header-of-a-data-table-control-using-custom-css/302/4 "2025-01-30T04:24:23Z")

</div>

@Endo There are no other additional steps required. Please check if the css is put inside in the Data Table’s custom css.

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/3515d43e8c80b9bdd79686ac099d769d8c026a72.jpeg)