CSS Tables: Highlighting Row on Hover

HTML

<table>
    <thead>
        <tr>
            <th>col_a</th>
            <th>col_b1</th>
            <th>col_b2</th>
            <th>col_c1</th>
            <th>col_c2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>v1_a</td>
            <td class='c1'>v1_b1</td>
            <td class='c1'>v1_b2</td>
            <td class='c2'>v1_c1</td>
            <td class='c2'>v1_c2</td>
        </tr>
        <tr>
            <td>v2_a</td>
            <td class='c1'>v2_b1</td>
            <td class='c1'>v2_b2</td>
            <td class='c2'>v2_c1</td>
            <td class='c2'>v2_c2</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

tbody td.c1:hover,
tbody td.c1:hover ~ .c1,
tbody td.c2:hover,
tbody td.c2:hover ~ .c2 {
    background-color: #CCffff;
}