Hide empty column headers in a table using CSS

[robinA]

Hello there !

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

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

.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 !

[ThinhDinh]

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

[robinA]

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

[ThinhDinh]

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?

[robinA]

Today it looks like that

I expect them to be like that|

Or even remove completly the header of the table

[Himaladin]

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

[robinA]

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

[Himaladin]

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?

[robinA]

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}