column background on table not displaying in ie6 and ie7

I am working with tables and each column was given a background and each td and th has a background image (just dotted lines) positioned to the bottom to act as some sort of separator. Whilst this works on all current browsers. IE6 & IE7 have refused to show my column background.

In trying to solve this, i removed the dotted image background applied to each td, and it show开发者_StackOverflow中文版s the column background. So basically its either one or the two. Any ideas how i can fix this?

<colgroup id="col1"></colgroup>
<colgroup id="col2" class="slim"></colgroup>
<colgroup id="col3" class="slim"></colgroup>
<thead>
       <tr>
          <th class="none">&nbsp;</th>
          <th class class="divider">
              <h2>Test</h2>
              <p>Lorem ipsum</[>
          </th>
        </tr>
    </thead>

#col2{
    background: url("images/col2.png") repeat;
}

.divider {
    background: url("images/dotted-line.gif") no-repeat center bottom;
}

I am aware of ie6 png issues but why it should at least work on ie7, shouldn't it, and perhaps just display a white background for ie6

just throwing it out there, but you could just throw a class on the td and th tags that need the background.