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? Thanks.
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>
...
visibility: collapse
was implemented in IE8
http://msdn.microsoft.com/en-us/library/ms531180%28VS.85%29.aspx
It is outdated, but you could use innerHTML to rewrite the parts that you want to be "gone."