Internet Explorer 7 css js table column display bug
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 clas开发者_StackOverflow中文版s="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.
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
精彩评论