JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<table class="table table-condensed">
    <colgroup>
        <col></col>
        <col class="info"></col>
        <col class="info"></col>
        <col class="success"></col>
        <col class="success"></col>
    </colgroup>
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Fisrt Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Bauer</td>
            <td>Jack</td>
            <td>Bauer</td>
        </tr>
    </tbody>
</table>

CSS

colgroup col.success {
  background-color: #dff0d8;
}
colgroup col.error{
  background-color: #f2dede;
}
colgroup col.warning {
  background-color: #fcf8e3;
}
colgroup col.info {
  background-color: #d9edf7;
}


.yellow {
    background: yellow!important;
}

JavaScript

var $table = $('table');
var $cols = $table.find('col');

$table.on('mouseenter mouseleave', 'th,td', function() {
    $cols.eq(this.cellIndex).toggleClass('yellow');
});