Таблица с вертикальной зеброй

by Евгений

HTML

<table>
    <colgroup>
        <col class="">
        <col class="col2">
        <col class="col3">
    </colgroup>
    <tr>
        <td>This</td>
        <td class="col2">That</td>
        <td class="col3">The other</td>
    </tr>
    <tr>
        <td>Ladybird</td>
        <td class="col2">Locust</td>
        <td class="col3">Lunch</td>
    </tr>
            <tr>
        <td>Ladybird</td>
        <td class="col2">Locust</td>
        <td class="col3">Lunch</td>
    </tr>
            <tr>
        <td>Ladybird</td>
        <td class="col2">Locust</td>
        <td class="col3">Lunch</td>
    </tr>
            <tr>
        <td>Ladybird</td>
        <td class="col2">Locust</td>
        <td class="col3">Lunch</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    border: 1px solid #c4c2c1;
    padding: 12px 15px;
    text-align: center;
}
col.col2 {
    background-color: #dbdbdb;
}
col.active {
    background-color: #07B133;
}

JavaScript

$('.col2, .col3').mouseenter(function(){
    $('col.' + $(this).attr('class')).addClass('active');
}).mouseleave(function() {
    $('col').removeClass('active');
});