Home/ Questions/Q 281393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T05:11:57+00:00

IE 7 does not display the initially hidden table cells (class=c) when class of

  • 0

IE 7 does not display the initially hidden table cells (class=”c”) when class of the containing div is changed to “b”, where “display:none” rule is removed. However, it should as it does for the row (class=”r”). Other browsers behave properly. Seems like an IE bug. Did anyone came across this issue before? Any solutions?

<html>
<head><style type="text/css">
.a .c { display: none; }
.a .r { display: none; }
.b .c { display: block; } /*Edited after comments, still not working*/
.b .r { display: block; } /*Edited after comments, still not working*/
</style></head><body>
<div class="a">
    <table>
        <tr>
            <td>11</td>
            <td class="c">12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td class="c">22</td>
            <td>23</td>
        </tr>
        <tr class="r">
            <td>31</td>
            <td class="c">32</td>
            <td>33</td>
        </tr>
    </table>
</div><button onclick="document.getElementsByTagName('div')[0].className = 'b'">Change class</button></body></html>

PS: I am trying to find a CSS only solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use display: table-cell; or display: table-row; in your separate class, for your <td> and <tr> tags respectively.

    This won’t work in IE6/7, so there are 2 other alternatives:

    1. Nest a <span> tag and use the display: (none|block) property in CSS on this instead.
    2. Use text-indent: (-9999em|0) to push the text off screen.
    • 0