与CSS的样式表

Question

我有一张简单的表格：

<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>

我希望表格跨越整个页面高度，但我希望每个<tr>包围内容，最后<tr>包围其余部分，我该怎么做？

HERE IS A FIDDLE

Answer 1

您可以使用last-of-type CSS3 pseudo-class：

tr:last-of-type {  
    height: 100%;
}

这将仅针对最后一个tr。

演示：http://jsfiddle.net/5L7fb/

如果您在一个页面中有多个表格，那么您应该使用descendant或child个选择器：

/* Descendant */
table tr:last-of-type {  
    height: 100%;
}

/* Child */
table > tr:last-of-type {  
    height: 100%;
}