HTML hidden td takes up blank space in IE6

Question

I am developing one JavaScript script that will hide and show td on my button click.

When I try to hide td , than IE6 hide td and put some spaces there, but, nevertheless, my code works on all the latest browsers of the order, even latest IE .

My code is:

 data = getElementsByClassName("data", "td", myElement); for (i = 0; i < data.length; i++) { td = data[i]; tr = td.parentNode; for (j = 0; j < tr.childNodes.length; j++) { tr.childNodes[j].style.display = "none"; } } 

Here I wrote my own getElementsByClassName method becusae IE6 does not support it, and I want IE6 support. The code above works in all other browsers except IE6 .

In IE6, my table looks like this:

And in other browsers

Thanks for the help.

Answer 1

Try to collapse them:

 tr.childNodes[j].style.visibility = "collapse"; tr.childNodes[j].style.display = "none"; 

And it will not hurt if you also set the display property.

---

If you later want to reactivate the cells, you can change it:

 tr.childNodes[j].style.visibility = "visible"; tr.childNodes[j].style.display = "table-cell"; 

---

If this does not work for any reason, we must find out why the gap still exists.
Can you use IE-Inspector / Dev-Tools (F12) and find out where the gap comes from?

I could imagine that the problem of filling / field / border is the problem,
or that this is a problem with the legendary hasLayout-issue .

Answer 2

IE6 receives text nodes and comment nodes. Maybe you should try:

 var doc = document; function getElementsByClassName(className){ if(doc.getElementsByClassName){ return doc.getElementsByClassName(className); } var r = [], all = doc.getElementsByTagName('*'); for(var i=0,l=all.length; i<l; i++){ var ai = all[i]; if(ai.className === className){ r.push(ai); } } return r; } var data = getElementsByClassName('data'); for(var i=0,l=data.length; i<l; i++){ var kids = data[i].parentNode.childNodes; for(var n=0,q=kids.length; n<q; n++){ var kid = kids[n]; if(kid.nodeType !== 1){ kid.style.display = 'none'; } } }