html - CSS样式表

我有一个简单的表：

<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

最佳答案

您可以使用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%;
}

关于html - CSS样式表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14599707/