Home/ Questions/Q 6846733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:39:35+00:00

The tr background property doesn’t seem to work in IE7. I want to make

  • 0

The tr background property doesn’t seem to work in IE7. I want to make the bgcolor of the row alternating and then have it a different color when the mouse is on the row. So I can’t use table tbody tr.d1 td{background:#f1f1f1;} because tbody tr.d1 td:hover{background:#f1f1f1;} will only affect the color of the cell, not the whole row…
Anyone has an idea on how to make this code work?:

<html>
    <head>  
      <script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" ></script>      
      <style type="text/css">
        table tbody tr.d1 td{background:transparent;}
        table tbody tr.d2 td{background:transparent;}
        table tbody tr.d1{background:#f1f1f1; color:#363636;}
        table tbody tr.d2{background:white; color:#363636;} 
        table tbody tr.d1:hover, tr.d2:hover{background:#FFF5C3; color:#FF7260;} 
      </style>        
    </head>
<body>  
    <table  class="sortable">
      <thead> 
        <tr>
          <th >Index</th> 
          <th><span class="nowrap">Parameter Name</span></th>
          <th><span class="nowrap">Parameter Value</span></th>
          <th><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th ><span class="nowrap">Page Name</span></th>
          <th class="sorttable_nosort scrollbarCol"></th> 
        </tr>
      </thead>  
      <tbody>
            <tr class="d1">
              <td>4_1</td> <td>gfryn</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_2</td> <td>aegr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d1">
              <td>4_3</td> <td>ryj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_4</td> <td>styj</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_5</td> <td>rth</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d2">
              <td>4_6</td> <td>srhfr</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td>
            </tr>
            <tr class="d1">
              <td>4_7</td> <td>sryh</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
            <tr class="d2">
              <td>4_8</td> <td>et5h</td> <td>4_2</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> <td>4_3</td> 
            </tr>
      </tbody>
    </table>
  </body>
</html>

[EDIT]
what would a javascript workarround look like?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try this:

    OLD: table tbody tr.d1:hover td, tr.d2:hover td {background-color:#FFF5C3; color:#FF7260;} 

      table tbody tr:hover, tr:hover td {background-color:#FFF5C3; color:#FF7260;}

    replace it in your code:

    <style>
        table tbody tr.d1{background-color:#f1f1f1; color:#363636;}
        table tbody tr.d2{background-color:white; color:#363636;} 
        table tbody tr:hover, tr:hover td{background-color:#FFF5C3; color:#FF7260;} 
</style>

    the js (jQuery) workaround

    $(tr).hover( 
  function() {
    $(this).toggleClass("highlight");
  }
);

    css:

    .highlight {background-color:#FFF5C3; color:#FF7260;}
    • 0