CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-7
jantimon
jantimon

Reputation: 38180

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 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":

Bug Demo

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.

Upvotes: 0

Views: 448

Answers (1)

Justus Romijn
Justus Romijn

Reputation: 16059

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

Upvotes: 1

Related Questions