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?

Tip: remember that World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and its a must in XHTML... — Luis, Oct 04 '12 at 16:55

Mr. Alien · Accepted Answer · 2012-10-04T17:00:24.157

9

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

edited Oct 04 '12 at 17:00

answered Oct 04 '12 at 16:43

Mr. Alien

153,751
34
298
278

I'm not sure I understand this – Fate Averie Oct 04 '12 at 16:58
1

take for example this `td:empty {background-color: #ff0000;}` – Mr. Alien Oct 04 '12 at 16:59
@Mr.Alien what to do to hide rows if value of that row is : "remove" , i tried `td:empty { value: remove; }` – fresher Feb 16 '18 at 07:36
@fresher You cannot do that with CSS, need to use JS for such things – Mr. Alien Feb 16 '18 at 08:15

score 0 · Answer 2 · answered Oct 04 '12 at 16:42

0

I think you can do this with the CSS property empty-cells, like so:

table {
  empty-cells:hide;
}

answered Oct 04 '12 at 16:42

Andy

14,427
3
52
76

My apologies, didn't see, and this hides specific cells, not rows, which is what I think you want – Andy Oct 04 '12 at 16:45
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 Oct 04 '12 at 16:59
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 ? – anjanesh Jun 14 '21 at 15:37

score 0 · Answer 3 · answered Oct 04 '12 at 17:51

0

The use of s:property suggests you are using Struts. In that case you could surround your table with a s:if tag to check if there is data to render the table with.

answered Oct 04 '12 at 17:51

Jasper de Vries

19,370
6
64
102

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 – Fate Averie Oct 04 '12 at 19:22
So, where does the `s:property` come from? Didn't you write that code? – Jasper de Vries Oct 04 '12 at 19:26

hide table rows if empty

3 Answers3

Linked