CodePen

HTML

            
              <p>This is an improvement and fix of a <a href="http://css-tricks.com/row-and-column-highlighting/">CSS-Tricks article</a>. Original fails with multiple tables and mouseover is triggered all the time (mouseenter is a better candidate: only do changes when changes are required).</p>
<table>
  
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<h2>Second breakfas... eh... Table <button>Add a line</button></h2>
<table>
  
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  margin: 0 auto;
  padding: 1em;
  width: 50em;
}

table {
  border-collapse: collapse;
  background: #F8F8F8;
  width: 20em;
}

th,td {
  border: 1px solid #AAA;
  height: 1em;
}

th {
  background: #CCC;
}

.hover {
  background: #E8E8E8;
}

td:hover {
  background: #DDD;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  
  $('table').on('mouseenter mouseleave', 'td', function(e) {
    (function(td, type) {
      td.parent()[type]('hover');
      td.closest('table').children('colgroup').eq(td.index())[type]('hover');
    })(
      $(this),
      e.type === 'mouseenter' ? 'addClass' : 'removeClass'
    );
  });
  
  // this verifies the dynamic nature of the above
  $('button').click(function(){
    $(this).parent().next().append('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
  });
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................