HTML hidden td takes white space in IE6

Question

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

When I am trying to hide the td than IE6 hide the td and put the some spaces there but however my code is working on the all the latest morder browser even the latest IE.

My code:

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 the IE6 does not support it and I want the IE6 support. above code works find in all other browsers except the IE6 browser.

In IE6 my table look like this:

And in other browsers

Thanks for the help.

Answer 1

Try collapsing them:

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

And it wouldn't hurt, if you'd also set the display-property.

---

If you later want to reactivate the cells, you could reverse it:

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

---

Should this not work for any reason, we should find out why there is still the gap.
Could you use the IE-Inspector/Dev-Tools (F12) and find out where the gap comes from?

I could imagine the padding/margin/border-properties are the issue here,
or that this is a problem with the legendary hasLayout-issue.

Answer 2

IE6 gets text Nodes and comment Nodes. Perhaps you should try this:

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';
    }
  }
}