Euler,
если очень хочется то можно, надо только css подшаманить ... может есть варианты лучше кто знает подскажите
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
td{
border: #000000 1px dashed;
}
table {
display: inline-block;
overflow: hidden;
}
td{
width: 100px;
height: 25px;
}
.cl{
width: 300px;
background: #FFFACD
}
tbody td:nth-last-child(2n+1) {
background: #f0f0f0;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<table style="border: #FF0000 1px solid; border-collapse: collapse">
<thead align="center">
<tr>
<td colspan="3" class="cl"> click </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>2</td>
</tr>
</tbody>
</table>
<script>
var h_table = $('table').height(), h_thead = $('thead').height(), n = 0;
$('thead').click(function ()
{
$('table').animate({height: (n^=1)? h_thead:h_table}, 1000);;
})
</script>
</body>
</html>