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%;
}