Styling table with CSS - html

Question

I have a simple table:
<table class="caspGrid">
<thead></thead>
<tbody>
<tr class="caspRow">
<td class="caspColEntity">
<input type="checkbox"/>
<span>Favorites</span>
<p>(<span>2</span>)</p>
</td>
<td class="caspColSummary">
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
</td>
<td class="caspColTeam">
<p>Tim Smith</p>
<p>Tim Smith</p>
<p>Tim Smith</p>
</td>
</tr>
</tbody>
</table>
I'd like the table to span the entire page height but I want each <tr> to wrap around the content and the last <tr> to span the rest of the way, how can I do that?
HERE IS A FIDDLE

Answer 1

You can use last-of-type CSS3 pseudo-class:
tr:last-of-type {
height: 100%;
}
this will target only the last tr.
Demo: http://jsfiddle.net/5L7fb/
If you have multiple tables in one page, then you should use descendant or child selectors:
/* Descendant */
table tr:last-of-type {
height: 100%;
}
/* Child */
table > tr:last-of-type {
height: 100%;
}