title: CSS Table Row border color with border-collapse
body: <p>I've seen several posts here on the subject, and I've read the W3C spec on border style conflict-resolution (and admit, I don't fully get it), and I'm not sure how to achieve what I want. </p>
  
  <p>On row hover, I want to change the color of the border around the row. I have surmised the best cross-browser way to do it is change the td border colors in that row. However, I can't seem to execute it in a way where the row's top border also changes. </p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#dataGrid table {
  border: 1px solid #cacac8; /* I've tried it with and without this border setting */
  table-layout: fixed;
  border-collapse: collapse;
  }
  
  #dataGrid td {
      border: 1px solid #cacac8;
      padding: 8px 11px 7px 11px;
      text-align: left;
  }
  
  #dataGrid .cellHovered {
      border-top: 1px solid #425474;
      border-bottom: 1px solid #425474;
  }
  
  #dataGrid .cellFirstHovered {border-left: 1px solid #425474;}
  #dataGrid .cellLastHovered {border-right: 1px solid #425474;}
  </code></pre>
  
  <p>and my JQuery:</p>
  
  <pre><code>$('div#dataGrid tr.dataRow').hover(
          function () {
              $(this).children('td').addClass('cellHovered');
              $(this).children('td:first').addClass('cellFirstHovered');
              $(this).children('td:last').addClass('cellLastHovered');
          },
          function() {
              $(this).children('td').removeClass('cellHovered');
              $(this).children('td:first').removeClass('cellFirstHovered');
              $(this).children('td:last').removeClass('cellLastHovered');
      });
  </code></pre>