CODEWITHSUNDEEP
cssinternet-explorerhtml-tablecss-tables
Ilhan
Ilhan

Reputation:

Display already hidden table cells in IE with CSS

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.

Upvotes: 0

Views: 2858

Answers (4)

ktjrdn
ktjrdn

Reputation:

I'm not sure of the validity, but if you just want to make it work, try to replace display: block; with display: ''; It's worked for me.

Upvotes: 0

Will Morgan
Will Morgan

Reputation: 4490

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.

Upvotes: 2

Emily
Emily

Reputation: 10088

This is the kind of browser inconsistancy that jQuery is great for.

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('td.c').hide();
        $('tr.r').hide();

        $('button').click(function(){
            $('td.c').show();
            $('tr.r').show();
        });
    });
</script>

And change your button to 

<button>Change class</button>

Upvotes: 1

deleteme
deleteme

Reputation:

Your b classes both need display: block; FWIW display: table-cell, and display: table-row should be used to make non table elements behave like tables. Also I'm not sure if table-cell and table-row are supported consistently across browsers.

Edit: I'm not sure if a pure CSS solution will be possible here. Generally I use javascript to reset the display property to "" (empty string). This allows each browser to do what it thinks is right to get the table elements to display again. Sorry I couldn't be of more help.

Upvotes: 0

Related Questions