ansaurus

Question

Display already hidden table cells in IE with CSS.

Answer 1

+2 A:

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:

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

Will Morgan 2009-07-15 12:35:38

Unfortunately that doesn't work. IE 7 doesn't support them neither. I've omitted them for cross browser compatibility, so that I don't have to check to assign 'block' (for IE) or 'table-cell' (for others) and let browsers assign whatever proper value necessary. Thanks for your answer.

2009-07-15 12:47:56

Out of curiosity, try using IDs instead of classes for the div's identifier.

Will Morgan 2009-07-15 13:13:05

Also, using: <td><span class="c">32</span></td> as a workaround. Superfluous code, but cross browser.

Will Morgan 2009-07-15 13:14:34

Wrapping content with a span workaround "looks" like working when table uses collapsed borders. Nice. But this requires some changes to my application which I would rather do as a last resort if a CSS only solution won't be found. Thanks again. (Using ID didn't make any difference.)

2009-07-15 13:29:36

Given that display is the only proper way of making things hide or show (though you could use `text-indent: -9999em` to hide stuff, `0em` to show) I think using a span might be your best bet at the moment.

Will Morgan 2009-07-15 14:21:35

It looks like so :)

2009-07-15 15:48:43

Answer 2

A:

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.

matth1jd 2009-07-15 12:49:49

I've edited the sample code to prevent further confusion. However, still doesn't work. Thanks for your answer.

2009-07-15 12:55:14

Answer 3

+1 A:

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"&gt;&lt;/script&gt;

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

Emily 2009-07-15 13:23:51

I agree; you can also use it to remove class a and add b if that's what the OP wants.

jeroen 2009-07-15 13:39:16

The table must be rendered with those columns hidden first. CSS is also working when the table is rendered with those columns visible on document load and then toggled. I am actually able do this with javascript modifying the css rules (setup slightly different than those in this sample). However, a pure CSS solution would be much simpler and perfect for my case. I only need to take care of IE for this mehtod. Thanks.

2009-07-15 13:44:33

Like I said, just remove class a and add class b, no changes to your css and html needed

jeroen 2009-07-15 14:02:28

@jeroen, without script (a requirement) how will the rows and cells be made hidden initially if the classes a and b are removed? Am I missing something obvious?

2009-07-15 14:11:16

Ah, I see your point. But classes a and b are required. They are used to indicate the state of filter active (like, a = show negative values, b = show positive values).

2009-07-15 14:15:38

Code could (and should) be simplified to: `$('.c, .r').hide();` and `$('.c, .r').show()` where you're repeating twice.

Will Morgan 2009-07-15 14:19:14

Answer 4

A:

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.

2009-07-21 13:45:33

ansaurus

tags:

views:

answers:

Display already hidden table cells in IE with CSS.

related questions