hide table rows if empty

Question

I have a table in my JSP that can, when the page is generated have empty and I want to know if there is a way for me to hide them only if they have no actual text in them, here is what they look like.

<TABLE border="1" style="empty-cells:hide;padding-left:4px">
<TR>
    <TD><s:property value="barfoo"/></TD>
    <TD align="center"><s:property value="foo"/></TD>
    <TD align="center"><s:property value="bar"/></TD>
    <TD align="center"><s:property value="foobar"/></TD>
</TR>
<TR>
    <TD><s:property value="barfoo"/></TD>
    <TD align="center"><s:property value="foo"/></TD>
    <TD align="center"><s:property value="bar"/></TD>
    <TD align="center"><s:property value="foobar"/></TD>
</TR>
<TR>
    <TD><s:property value="barfoo"/></TD>
    <TD align="center"><s:property value="foo"/></TD>
    <TD align="center"><s:property value="bar"/></TD>
    <TD align="center"><s:property value="foobar"/></TD>
</TR>
<TR>
    <TD><s:property value="barfoo"/></TD>
    <TD align="center"><s:property value="foo"/></TD>
    <TD align="center"><s:property value="bar"/></TD>
    <TD align="center"><s:property value="foobar"/></TD>
</TR>
</TABLE>

but the thing is not all of them will be filled out all the time, sometimes they will basically return null values just leaving behind an empty space, and I want to hide them only if they are going to leave that empty space any way I can use a simple solution that works on most browsers to hide that blank space?

Solution

You can use css :empty pseudo-class

tagname:empty {
 display: none;
}

This pseudo-class styles empty elements...

be sure before you use this as it is not widely supported yet, most probably IE will be causing problems

Comments

[Andy]

My apologies, didn't see, and this hides specific cells, not rows, which is what I think you want

[Fate Averie]

I'm not sure I understand this

[Mr. Alien]

take for example this td:empty {background-color: #ff0000;}

[Fate Averie]

either the cells or the rows, the fact is I have a huge trailing space in my table when those cells are empty and hidden, what I need is to remove the trailing space that is leaves behind

[Fate Averie]

there will always be data to render, it's just that some rows will appear blank, all I'm looking for is the simplest method to hide a row or set of rows when the cells in that row are basically void, without leaving behind that blank spacey that empty-cells would normally give me, and I don't know what struts is, all I do is the layout for now, so your speaking half mumbo jumbo when you mention struts

[Jasper de Vries]

So, where does the s:property come from? Didn't you write that code?

[fresher]

@Mr.Alien what to do to hide rows if value of that row is : "remove" , i tried td:empty { value: remove; }

[Mr. Alien]

@fresher You cannot do that with CSS, need to use JS for such things

[anjanesh]

I have a couple of empty rows (it actually has empty TDs) which is set in Saleforce's Service Cloud for which I have not found a solution to not output the TR if the data is null. As a result there are empty rows, sometimes in a group which is causing a gap in the table. Will table { empty-cells:hide; } collapse the empty rows ?