0

私は単純なテーブルを持っています:

<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>に残りの部分に広げたいのですが、どうすればよいですか?

ここにフィドルがあります

4

1 に答える 1

1

last-of-type CSS3 疑似クラスを使用できます:

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

これは最後の tr のみを対象とします。

デモ: http://jsfiddle.net/5L7fb/

1 つのページに複数のテーブルがある場合は、descendantまたはchildセレクターを使用する必要があります。

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

/* Child */
table > tr:last-of-type {  
    height: 100%;
}
于 2013-01-30T10:32:51.683 に答える