CSS hidding a COL in a table
Posted: Sun Mar 29, 2009 8:35 am
I'd like to find a way to hide columns properly in a table using CSS.
So far my table structure is standard:
and i've got some styles:
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+?
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>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; }