Table row background repeats in columns for Google Chrome & IE7

          While working with tables, I struck with a css issue in table row background in Google Chrome & in Internet Explorer 7, no issue in other browsers (Firefox, Internet Explorer 8 & 9). If we specify a background image for a row (tr), it will repeats in every columns(td or th) in that row. The issue as the image:

     By Googling and using some tricks, I can fix this issue (thanks God) in both browsers. The initial HTML and CSS as:
<table cellspacing="0" cellpadding="0" class="bidTable">
           <tbody>
        <tr class="bidHeader">
               <th id="category">Category</th>
               <th id="minBid">Min Bid</th>
               <th id="highBid">High Bid</th>
           </tr>
           <tr>
               <td class="cat">Test Category </td>
               <td class="min-bid">$0 </td>
               <td class="high-bid">$13 </td>
           </tr>
       </tbody>
</table>


.bidTable tr {
    background: url("../images/bid_bottom.png") no-repeat scroll 0 0 transparent;
    height: 53px;
    width: 464px;
}

.bidTable tr.bidHeader {
    background: url("../images/bid_header.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    width: 464px;
}

.bidTable th {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
}

.bidHeader #category {
    padding-left: 20px;
    text-align: center;
    width: 260px;
}

.bidHeader #minBid {
    width: 92px;
}
.bidHeader #highBid {
    width: 92px;
}


For other browsers it seen as:

   For Google Chrome, I have to use use the CSS hack. The issue is fixed by adding  display: inline-table; for both td & th. But I have to do extra css to keep the alignment. The CSS is like this:


/* for google crome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .bidTable td, .bidTable th {
      display: inline-table;
      height: 9px;
      padding: 12px 0 0 0;
  }
  .bidHeader #category, .bidTable .cat{
      width: 267px;
      padding-left: 20px;
      text-align: center;
  }
  .bidHeader #minBid, .bidTable .min-bid{
      width: 73px;
  }

  .bidHeader #highBid, .bidTable .high-bid{
      width: 78px;
  }
}


For IE7, also used the CSS hack, for tr added position: relative; and for th & td added background: none; like this.

  /* for IE 7 */
  *+html .bidTable tr {
      position: relative;
      padding: 0;     
  }
  *+html .bidTable th {
      background: none;     
  }
  *+html .bidTable td {
      background: none;     
  }