CSS hidding a COL in a table

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

CSS hidding a COL in a table

Post 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+?
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS hidding a COL in a table

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS hidding a COL in a table

Post by kaszu »

visibility: collapse;
there is no such property, try

Code: Select all

display: none
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS hidding a COL in a table

Post 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...
Attachments
visibility.jpg
visibility.jpg (30.96 KiB) Viewed 4572 times
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS hidding a COL in a table

Post 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 :(
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS hidding a COL in a table

Post 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
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS hidding a COL in a table

Post 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.
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS hidding a COL in a table

Post 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.
Post Reply