HTML table row and column hover with jQuery and CSS

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
/* #Reset & Basics (Inspired by E. Meyers) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* #Clear fix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Table Hover Effects */
.hovertable { width:auto;  border-collapse:separate; border-spacing: 5px 0; border:1px solid #f6f6f7; padding:5px 0; margin-bottom:20px; }
.hovertable thead { }
.hovertable th { text-align:center; padding:5px; background:#E6E6E6; border-bottom: 5px solid #FFFFFF; font-weight:bold; }
.hovertable td { text-align:center; padding:5px;  }
.hovertable colgroup { width:100px; }
.hovertable td.columnHead, .hovertable tr.rowHover, .hovertable td.columnHover { background:#ECE8E5; }
.hovertable tr.rowHover td.columnHead, .hovertable td.hover { background:#EF9E7C; }
</style>
</head>
<body>

<table id="example" class="hovertable">
    <colgroup></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <thead>
        <tr>
            <th>KNITWEAR</th>
            <th>UK</th>
            <th>FRANCE</th>
            <th>ITALY</th>
            <th>JAPAN</th>
            <th>DENMARK</th>
            <th>US</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="columnHead">XS</td>
            <td>6</td>
            <td>34</td>
            <td>38</td>
            <td>5</td>
            <td>32</td>
            <td>2</td>
        </tr>
        <tr class="even">
            <td class="columnHead">S</td>
            <td>8</td>
            <td>36</td>
            <td>40</td>
            <td>7</td>
            <td>34</td>
            <td>4</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">M</td>
            <td>10</td>
            <td>38</td>
            <td>42</td>
            <td>9</td>
            <td>36</td>
            <td>6</td>
        </tr>
        <tr class="even">
            <td class="columnHead">L</td>
            <td>12</td>
            <td>40</td>
            <td>44</td>
            <td>11</td>
            <td>38</td>
            <td>8</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">XL</td>
            <td>14</td>
            <td>42</td>
            <td>46</td>
            <td>13</td>
            <td>40</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

</div>
<script>
// initiate hover effects
$(function(){
				
	$("table").delegate('td','mouseover mouseleave', function(e) {
		var table = $(this).parent().parent();
		var col = $(this).parent().children().index($(this));
		var row = $(this).parent().parent().children().index($(this).parent());
		if (e.type == 'mouseover') {
			$(this).addClass("hover");
			$(this).parent().addClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).addClass("columnHover");
		}
		else {
			$(this).removeClass("hover");
			$(this).parent().removeClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).removeClass("columnHover");
		}
	});				
				
});
</script>
</body>
</html>

References: