html - 使用 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>跨越其余部分，我该怎么做？

这是一个小提琴

Answer 1

您可以使用最后一个类型的 CSS3 伪类：

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

这将仅针对最后一个 tr。

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

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

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

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