Page 1 of 1

CSS hidding a COL in a table

Posted: Sun Mar 29, 2009 8:35 am
by crazycoders
I'd like to find a way to hide columns properly in a table using CSS.

So far my table structure is standard:

Code: Select all

<table id="inheritedmembers">
<col class="colusername" />
<col class="coluser_email" />
<col class="colgroup_id" />
 
<col class="coluser_id" />
<thead>
<tr>
<td>username</td>
<td>user_email</td>
<td>group_id</td>
<td>user_id</td>
</tr>
</thead>
<tbody>
<tr class="">
<td>Anonymous</td>
 
<td></td>
<td>1</td>
<td>1</td>
</tr>
<tr class="alt">
<td>crazyone</td>
<td>crazyone@crazycoders.net</td>
<td>5</td>
<td>2</td>
</tr>
<tr class="">
 
<td>AdsBot [Google]</td>
<td></td>
<td>6</td>
<td>3</td>
</tr>
<tr class="alt">
<td>Alexa [Bot]</td>
<td></td>
<td>6</td>
<td>4</td>
</tr>
</tbody>
</table>
and i've got some styles:

Code: Select all

table#inheritedmembers { border-top-width: 2.0px; border-top-style: solid; border-right-width: 2.0px; border-right-style: solid; border-bottom-width: 2.0px; border-bottom-style: solid; border-left-width: 2.0px; border-left-style: solid; } 
table#inheritedmembers thead tr td { font-weight: bold; color: #ffffff; padding-top: 4.0px; padding-right: 4.0px; padding-bottom: 4.0px; padding-left: 4.0px; background-color: #666666; } 
table#inheritedmembers tbody tr td { padding-top: 4.0px; padding-right: 4.0px; padding-bottom: 4.0px; padding-left: 4.0px; border-right-width: 1.0px; border-right-style: dotted; border-right-color: #aaaaaa; border-bottom-width: 1.0px; border-bottom-style: dotted; border-bottom-color: #aaaaaa; background-color: #eaeaea; } 
table#inheritedmembers  tbody tr.alt td { background-color: #e1e1e1; } 
table#inheritedmembers .colusername { visibility: collapse; }
table#inheritedmembers .coluser_email { visibility: collapse; }
table#inheritedmembers .colgroup_id { visibility: collapse; }
table#inheritedmembers .coluser_id { visibility: collapse; }
table#inheritedmembers { border-collapse: collapse; }
 
I tried using COLLAPSE, HIDDEN with visibility or NONE using display and none works correctly under FF3. I always have the space reserved and borders show... In the previous example, the table should be totally shrinked and show nada except the table's border but it doesn't work correctly. Any idea how to make it work correctly for both IE7+ and FF3+?

Re: CSS hidding a COL in a table

Posted: Sun Mar 29, 2009 8:38 am
by crazycoders
Oh and i also tried removing the cell attributes such as padding, margin, background-color,, border and setting the width to 0px or 1px but it seems that collapse doesn't collapse the content, only the cell, but then, a space is reserved and it leaves it there or something like that i think...

really strange

Re: CSS hidding a COL in a table

Posted: Sun Mar 29, 2009 11:29 am
by kaszu
visibility: collapse;
there is no such property, try

Code: Select all

display: none

Re: CSS hidding a COL in a table

Posted: Mon Mar 30, 2009 6:26 am
by crazycoders
Yes it does, it's in fact the correct way of doing if you look at the w3c. And no Display:None is not the right way, IE 7 supports it but the official way is using visibility:collapse.

I just needed a tweak to see if reseting some props would help but my guess is it's a gecko problem...

Re: CSS hidding a COL in a table

Posted: Mon Mar 30, 2009 1:08 pm
by kaszu
Hm.. didn't knew there was such a property. But it looks like it doesn't work correctly in IE7 and in web-kit it's not supported according to http://www.quirksmode.org/css/columns.html
Have no idea how to fix it :(

Re: CSS hidding a COL in a table

Posted: Mon Mar 30, 2009 1:20 pm
by crazycoders
Bah, i have submitted a bug report to mozilla.

I guess Trident engine (IE) will fix it in IE8 and support it correctly (Can always hope)

For now, i decided that my framework will simply not print out the data if the columns of the grid are to be hidden, and when all user agents will support it, i will implement it back as a real hidden column...

Thanks anyway man

Re: CSS hidding a COL in a table

Posted: Mon Mar 30, 2009 8:23 pm
by JAB Creations
View the source here...
http://www.jabcreations.com/blog/?promp ... patibility

...and look for the line...

Code: Select all

<table summary="This table displays third party modules of the past and present.">
That is probably what you're trying to do. I've never come across a "col" element so it's likely you're reading proprietary or deprecated HTML at best.

Re: CSS hidding a COL in a table

Posted: Tue Mar 31, 2009 6:41 am
by crazycoders
Col group tags are a superobject that can act as a grouping of columns to event more simplify the column specification. As per w3c, the col element represents 1 column as long as it's colspan attribute is not set higher. The colgroup element is the exact same and is used this way:

Code: Select all

<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<col />
<col />
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
And as you may see may feature a mix of colgroup and col elements. Col elements represent columns, colgroups represents groups of columns.

In the event a colgroup has no columns inside of itself, it is considered that the colgroup element represents a single col element.

lookup the W3C HTML/XHTML specification in the TABLES section for more info.