Reset.css is overriding colgroup background in IE7/IE6

Question

I have a table where the columns have a different background set by a colgroup. However, in IE6/7 it's completely ignoring the colgroup background and taking the reset.css background value for the cell (which is background:transparent). How can I fix this without having to go to each cell and manually entering a background value?

HTML

<table id="services-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>      
 <col class="services-oddcolumn" />         
 <col class="services-evencolumn" />     
</colgroup> 
<tbody>   
  <tr>     
    <td>Column #1, Row #1</td>
    <td>Column #2, Row #1</td>
  </tr>

  <tr>
    <td>Column #1, Row #2</td>
    <td>Column #2, Row #2</td>
   </tr>
</tbody>

RESET(this is placed above the main CSS file)

html,body, table,tr,th,td {background:transparent;} //it's taking this background value for TD and column

CSS

.services-oddcolumn{background-color:#000 !important; width:10%;} 
.services-evencolumn{background-color:#fff !important; width:10%;}

EDIT - In the end there's no "clean" fix, I just had to change the reset.css file so table,tr,th,td tags were excluded from background:transparent property

Answer 1

Firstly, congratulations on even knowing about the <colgroup> tag, let alone using it. It's not exactly the most well-known element in the HTML developers arsenal.

Sadly however, one of the reasons it's not very well known is that it is not very well supported, and it sounds like you've hit upon a bug which you're not going to be able to work around.

Have a look at this page: http://marc.baffl.co.uk/bugs.php and search for the word 'colgroup'. You'll find a description of various bugs you'll encounter, along with a table of which browsers support it properly at all. Unfortunately for you, IE6 and IE7 have the word "no" in every column of that table.

You may have a hard time getting this working if you plan to support IE6 and IE7.

[EDIT] It's worth noting that this lack of support in IE is particularly ironic given that <colgroup> was originally an IE-specific extension back in the IE4 days.

If you want to support older IEs, my suggestion would be to abandon <colgroup> and simply use classes on your <td> elements to achieve the same effect.