# Hide empty column headers in a table using CSS

**URL:** <https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069>\
**Category:** Ask for Help\
**Created:** [September 2, 2024, 1:44pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069 "2024-09-02T13:44:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![robinA](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@robinA](https://community.glideapps.com/u/robinA)\
**Post date:** [September 2, 2024, 1:44pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/1 "2024-09-02T13:44:53Z")

</div>

Hello there !

I’m trying to put different buttons on the same column in a Table component,  
See this screenshot

 ![Capture d’écran 2024-09-02 à 3.33.55 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9bc848ad3ef481de684c93380c5336790893b773.png)

I can do that for the cells part using CSS with this code

```auto
.hideemptydiv tr > td:empty {
   display: none;
}

```

However I want to hide the Column headers that are empty aswell.

I tried to use `th:nth-child(-n+9)` as a selector, but it seems that th itself doesn’t work. I also tried other name or finding it in the code of the page but eventually could not.

Is there anything I am missing or a workaround ?  
Thank you so much guys !

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 3, 2024, 12:23am UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/2 "2024-09-03T00:23:54Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33ec6e2cd498ec64dd9310c98e7b4a30d6bd9169.png)

Is this caused by your current CSS? I think that’s a problem.

---

<div class="post-metadata">

**Author:** ![robinA](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@robinA](https://community.glideapps.com/u/robinA)\
**Post date:** [September 3, 2024, 10:29am UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/3 "2024-09-03T10:29:28Z")

</div>

Hello ThinhDinh thank you for your answer !

It’s caused because I didn’t set a button for them yet, now they are on the same column, still I didn’t find how to deal with not displaying the empty values of column headers

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 3, 2024, 2:49pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/4 "2024-09-03T14:49:22Z")

</div>

Do you have a visual example of how you expect them to look like? Do you mean you still want to display headers for non-button columns?

---

<div class="post-metadata">

**Author:** ![robinA](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@robinA](https://community.glideapps.com/u/robinA)\
**Post date:** [September 3, 2024, 3:36pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/5 "2024-09-03T15:36:00Z")

</div>

Today it looks like that

 ![Capture d’écran 2024-09-03 à 5.31.07 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c90ba40dc0ae1584905cba91724c9b53027c5b36.png)

I expect them to be like that|

 ![Capture d’écran 2024-09-03 à 5.31.07 PM copie](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b4c8649443629721d9fe2ac37881b09224c6dac0.png)

Or even remove completly the header of the table

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 3, 2024, 3:54pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/6 "2024-09-03T15:54:41Z")

</div>

I’m not quite sure what you mean. Can’t you do it in the column editing section by clearing the Header?

 ![Screenshot 2024-09-03 at 22.53.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/34a7601851c0ba6b28714ba4faa679f18a369e42.png)

---

<div class="post-metadata">

**Author:** ![robinA](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@robinA](https://community.glideapps.com/u/robinA)\
**Post date:** [September 3, 2024, 4:42pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/7 "2024-09-03T16:42:48Z")

</div>

Thank for your answer I’m looking for a way to select the headers in CSS to either make them disappear or choose some of them to disappear (by selecting the first 9 nth-child for example.

If you clear all the headers values you still have an ugly blank space

 ![Capture d’écran 2024-09-03 à 6.41.57 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73a34c327b646c6f45a4ad8fd8c6cd15ed3731eb.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 3, 2024, 4:47pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/8 "2024-09-03T16:47:06Z")

</div>

So, you don’t mean to hide the header only when the entire column has no values and show it again when values are present?  
How do you explain the space required in columns above 9?

---

<div class="post-metadata">

**Author:** ![robinA](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@robinA](https://community.glideapps.com/u/robinA)\
**Post date:** [September 10, 2024, 12:27pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/9 "2024-09-10T12:27:18Z")

</div>

Hello !

I found the solution myself !  
Each of your row, including headers, have a class. I figured it out by just adding to that class a `{display: none}`

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 17, 2024, 12:27pm UTC](https://community.glideapps.com/t/hide-empty-column-headers-in-a-table-using-css/76069/10 "2024-09-17T12:27:47Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
