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?

Answer 1

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