CODEWITHSUNDEEP
htmlcsshtml-tablevisibility
tic
tic

Reputation: 4189

Alternative to visibility:collapse not working on IE and Chrome

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?

Upvotes: 13

Views: 25535

Answers (6)

Jar
Jar

Reputation: 2010

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)

Upvotes: 1

DarkKnightFan
DarkKnightFan

Reputation: 1953

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!

Upvotes: 0

Senthil
Senthil

Reputation: 5804

Use
display: none

instead of visibility: collapse

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

Upvotes: 24

Frances Advincula
Frances Advincula

Reputation: 1

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

Upvotes: 0

Leo
Leo

Reputation: 1809

visibility: collapse

was implemented in IE8

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

Upvotes: 2

Pekka
Pekka

Reputation: 449475

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>
...

Upvotes: 1

Related Questions