Home Log In or Register Forums

Hiding table columns with CSS

Home > Forums > It And Computing > 'Hiding table columns with CSS'
'Hiding table columns with CSS'
Page: [1]
richard's user image
richard
25.01.2006 - 14:07
forum administrator
Been messing around with colgroups and have noticed a very annoying inconsistency between FireFox and IE.

This is the HTML I have:

<table cellspacing="0" id="DataTable" class="ShowCol1">
    <col class="Col1" />
    <col class="Col2" />
    <tbody id="block1">
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

And this is the CSS to drive it:

.Col1 { display: none; }
.ShowCol1 .Col1 { display: block; }
.Col2 { display: none; }
.ShowCol2 .Col2 { display: block; }

I use a simple javascript function to change the class of the table to show the relevant column. Now this works fine in IE, but not FireFox. However, the following CSS works in FireFox but NOT IE:

.Col1 { visibility: collapse; }
.ShowCol1 .Col1 { visibility: visible; }
.Col2 { visibility: collapse; }
.ShowCol2 .Col2 { visibility: visible; }

But rather annoyingly, if you have BOTH the CSS definitions (visibility AND display), FireFox stops working (although IE continues to work fine).

I'm at a loss with it and I really don't want to have to create a separate stylesheet for each browser!!

Any suggestions, please e-mail me! richard@[this website]
Page: [1]

You must log in to post messages on this board. If you don't have a username and password, you can register quickly to get them!

contact us © 2003, 2004 BurningHorizons.net