Internet Explorer 7 css js table column display bug

Question

Hey everybody,

There is a strange bug which I can't solve.

The bug is reproducable by this simplified example:

css:

table.class1 td.subclass1{ display : none }
table.class2 td.subclass2{ display : none }

html:

<table class="class1">
 <tr>
  <td class="subclass1"> Invisible </td>
  <td class="subclass2"> Visible </td>
 </tr>
</table>

js ( jQuery)

$("table.class1").removeClass("class1").addClass("class2);

As you can see Internet Explorer 7 doesn't show the column "Visible":

You may take a look at this bug here:

Fiddle Demo

What do I have to do to switch from one column to another column?

Unfortunately I can't change the HTML but only the CSS and JS.

Answer 1

IE7 seems to have problems with the display:none property. If you do all of the show/hide rendering in javascript it will work as expected.

I've updated the code in jsFiddle with the working solution. (I should've forked it, but I already pressed update, sorry about that)

jsFiddle