13

The following page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<STYLE type="text/css"> 
tr.cccc {
visibility: collapse;
}
</STYLE>
<BODY>
<TABLE border="1">
<TR class="cccc">
<TD>one</TD>
</TR>
</TABLE>
</BODY>
</HTML>

works only in Firefox. IE always displays the row, and Chrome hides the row but showing its vertical space. So, how can I hide completely a row using only CSS?

2
  • 4
    Have you tried "display: none;"?
    – o.k.w
    Mar 21, 2010 at 13:22
  • It is a little late but you can get it to work on Chrome this way Oct 4, 2014 at 22:07

6 Answers 6

23

Use
display: none

instead of visibility: collapse

It works for me to hide the dojo tree grid summary row in IE6 & Google Chrome

3
  • 6
    Unfortunately, display: none; also causes the rows and cells to be ignored for purposes of computing rowspan and colspan in at least a few browsers, causing table layouts with rowspan and colspan to go all wonky.
    – daveidmx
    Sep 1, 2011 at 20:17
  • Will setting visibilty to visable make it appear? Or will I have to get rid of the display thing as well. Nov 1, 2011 at 15:06
  • visibility: visible is working for me Dec 13, 2021 at 3:00
2
visibility: collapse

was implemented in IE8

http://msdn.microsoft.com/en-us/library/ms531180%28VS.85%29.aspx

1

visibility: collapse does not work in IE. Source seems you will need to use hidden instead for IE. See the linked page for details.

However, the specification clearly states that in the case of columns, only collapse is a valid value. collapse is supported only by Firefox. Since Explorer Windows supports all style declarations on columns anyway, it also supports visibility: hidden.

Also, it doesn't hurt to give the construct a complete HTML structure:

<!DOCTYPE html PUBLIC 
 "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<STYLE type="text/css"> 
 ....
</STYLE>
</HEAD>
...
1
  • 2
    I already know hidden value of visibility property. Hidden is not the right solution to my problem. I want the row completely disappears: that is, it hasn't to show a blank space. Hidden hides data, BUT retains the vertical space. Collapse hides the data AND remove the space taken by the row, as if it was not there at all.
    – tic
    Mar 21, 2010 at 16:06
0

It is outdated, but you could use innerHTML to rewrite the parts that you want to be "gone."

0

Well it seems visibility: collapse can be used in IE as well. I am using it and it is working in both IE and Firefox. Dont know about other browsers apart from these two.

I have done the following:

HTML:

<table class="intValidationTable">

<tr class="rangeTR" style="visibility: collapse;">

<tr class="listTR" style="visibility: collapse;">

Javascript + Jquery:

var rows = $('table.intValidationTable tr');

var rangeTR = rows.filter('.rangeTR');

var listTR = rows.filter('.listTR');

rangeTR.css("visibility", "visible");

listTR.css("visibility", "collapse");

This should work!

0

visibility: collapse; in a tr and td for me is just hiding the data but still taking up vertical space in Safari in 2020. Works fine in chrome (row and column widths still ok but vertical space is gone)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.