1

I have a table with some css to hide/show columns. Each td has the classes "column" and "columnX" where X is the column number. The css looks like:

.column { display: none; }
table.show1 .column1 { display: block; }
table.show2 .column2 { display: block; }

The table starts out all hidden and the user turns them on. When this happens, a class is added to table like "show1" or "show2" depending on the column being shown.

This works great in FF, chrome, and IE8. But IE6/7 have an issue where a "column" does not become "display: block". However, if I go in the developer toolbar and toggle the css rule 

table.showX .columnX {display: block; }

it works fine. It is like these old browsers do not know to update the table when done via javascript. Also, if I add a class like "show0" to the table to begin with (not in javascript), it works fine in IE6/7.

Any known workarounds for this?

Joda Maki
  • 5,649
  • 6
  • 27
  • 36

1 Answers1

0

Well, first of all, the correct display value for a table cell is not "block"; it's "table-cell". Now, that's a moot point for old versions of IE anyway, since they don't really understand that sort of fancy stuff.

Now the next problem is the fact that old IE (6 and 7, not 8) have this entertaining feature when initially rendering table cells: if, when the table is first rendered, a column of <td> (and a <th> at the top, if you like) elements is not visible, then subsequent changes to the DOM will never make it show up. It's just stupid that way; in fact I've asked the same question here.

What I've done to work around the problem is drop some JavaScript onto the page so that after the HTML is first rendered, some code can come back and then make the appropriate columns invisible. So long as they start off visible, they can be turned off and back on without incident afterwards.

Community
  • 1
  • 1
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • How did you resolve your issue? Also, setting visibility: hidden seems to not work either although it was suggested as a fix, were you able to get that to work? – Joda Maki Jan 17 '11 at 18:28
  • No, none of those suggestions worked for me. What I ended up doing is what I describe here: the columns that are supposed to be invisible start off visible, and then I run some Javascript to switch them off. It's ridiculous but it's the only thing I know of that works. (Let me know if you find something better!!) – Pointy Jan 17 '11 at 18:31
  • Oh, also, even if the "visibility" thing did work, it wouldn't be what you probably want. In my case, I really weanted the columns to be gone completely. With "visibility: hidden" there'd still be room taken up on the screen. – Pointy Jan 17 '11 at 18:32
  • the visibility thing could be acceptable for me if I work it right (I usually only show like 5 adjacent rows at a time). The issue for me is that I can't start them off visible because this is a huge table and would take a while to draw. Another annoying thing is that it comes in as a big string via ajax. Maybe you have a suggestion. I'll let you know if I discover something. – Joda Maki Jan 17 '11 at 18:35
  • @Joda Maki in that other question I linked to, I posted the URLs for a couple of test pages. I think those pages are still out there and they should still work as test pages. Please feel free to copy them and use them for your own testing! – Pointy Jan 17 '11 at 18:39