Stackoverflow - html: hover table column

http://stackoverflow.com/questions/848840/cols-colgroups-and-css-hover-psuedoclass?noredirect=1&lq=1

HTML

<table id='table'>
  <col />
  <col />
  <col />
  <col />
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Birthdate</th>
      <th>Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Abraham Lincoln</td>
      <td>204</td>
      <td>February 12</td>
      <td>Stovepipe</td>
    </tr>
    <tr>
      <td>Winston Churchill</td>
      <td>139</td>
      <td>November 30</td>
      <td>Homburg</td>
    </tr>
    <tr>
      <td>Rob Glazebrook</td>
      <td>32</td>
      <td>August 6</td>
      <td>Flat Cap</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}

table {
  position: relative;
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}

table th {
  text-align: left;
}

table tr,
table col {
  transition: all .3s;
}

td::before {
  opacity: 1;
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

td:hover::before {
  opacity: 1;
}

tr,
col {
  transition: all .3s;
}

col.hover {
  background-color: rgba(0, 140, 203, .2);
}

JavaScript

/* const table = document.getElementById('table');
const td = document.getElementsByTagName('td');
const col = table.getElementsByTagName('col');
const columnEnter = (i) => {
  col[i].classList.add('hover');
}
const columnLeave = (i) => col[i].classList.remove('hover');

for (var i = 0; i < td.length; i++) {
  const cellIndex = td[i].cellIndex;
  td[i].addEventListener('mouseenter', columnEnter.bind(this, cellIndex));
  td[i].addEventListener('mouseleave', columnLeave.bind(this, cellIndex));
}
 */