[Resolved] How to hide a grid cell which has no data

[Author]

Posts

[lesleyA]

Tell us what you are trying to do?

I have set up a content template to display a table in each of a set of posts in a new CPT.
I've made a repeatable field group for the CPT that will populate each table.

The problem is that some of my tables will use all the columns, while a few will not.

How can I make it so that the empty cells of some tables do not show? (Empty cells will always be the last [x number of] columns.)

I've attached an image so you can see what I mean.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To hide the empty heading and the normal cells from a table, you can use the custom CSS code, for example:

table td:empty,
table th:empty {
  display: none;
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[lesleyA]

Thank you Waqar

I'd hope that some CSS might be the answer!

Now, I popped the above CSS into my themes Additional CSS in customizer and it didn't work. So I put it into the Custom CSS for the view, but that didn't work either.

Would you be so kind as to advise me further?

Here is a link to the template in question: hidden link

[Waqar]

Thank you for sharing the link.

The CSS code didn't work, because the view is showing the columns using the grid block layout and not the table.

In this case, you can include the following script in the view's "JS editor":

jQuery(document).ready(function( $ ) {

  $('.js-wpv-loop-wrapper > .tb-grid > .tb-grid-column > .wpv-block-loop-item .tb-grid .tb-grid-column > .tb-field').each(function() {
    var innerContent = $( this ).html();
    if(!innerContent) {
      $( this ).parent('.tb-grid-column').remove();
    }
  });
  
});

This script will cycle through each column's cell and remove the empty ones.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[lesleyA]

Waqar's JS code above, is the solution in this instance.

My issue is resolved now. Thank you!