CodePen

HTML

            
              <table class="zebra"> 
<col>
<col>
<col>
<col>
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr id='row'> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
.hover {
  background: yellow;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var tds = 
  document.querySelectorAll("td");
var ths = 
  document.querySelectorAll("th");

var cells = 
    Array.prototype.slice.call(tds)
      .concat(
        Array.prototype.slice.call(ths)
      );

var rows =
  document.querySelectorAll("tr");

[].forEach.call(
  cells, 
  function(el) {
    el.addEventListener(
      'mouseover', 
      function() {

        var index = indexInParent(this);
        
        for (var i = 0; i < rows.length; i++) {
          var cellsInThisRow = rows[i].getElementsByTagName("td");
          
          if (cellsInThisRow.length == 0) {
            cellsInThisRow = rows[i].getElementsByTagName("th");
          }
          
          cellsInThisRow[index]
            .classList
            .add("hover");
        };  
                  
      }, 
      false
    );
  }
);

[].forEach.call(
  cells, 
  function(el) {
    el.addEventListener(
      'mouseout', 
      function() {
        for (var i = 0; i < cells.length; i++) {
          cells[i]
            .classList
            .remove("hover");
        }
      }, 
      false
    );
  }
);

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    var num = 0;
    for (var i=0; i<children.length; i++) {
         if (children[i]==node) return num;
         if (children[i].nodeType==1) num++;
    }
    return -1;
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................