除最後一行外，如何將表格行高設置爲最小值？

Question

我正在試圖製作一個僅佔用垂直空間所需空間的表格。有沒有辦法使用CSS做到這一點，而沒有將最後一個單元格設置爲100％的高度？

這個問題和this question只是在另一個方向非常相似。

目前看起來是這樣的：

--------------------------------- 
|         | 
|thing 1       | 
|         | 
--------------------------------- 
|         | 
|thing 2       | 
|         | 
--------------------------------- 
|         | 
|thing 3       | 
|         | 
--------bottom of table---------- 

如何得到它看起來像

--------------------------------- 
|thing 1       | 
--------------------------------- 
|thing 2       | 
--------------------------------- 
|thing 3       | 
|         | 
|         | 
|         | 
|         | 
|         | 
|         | 
--------bottom of table---------- 

，或者像：

--------------------------------- 
|thing 1       | 
--------------------------------- 
|thing 2       | 
--------------------------------- 
|thing 3       | 
--------bottom of table---------- 





-----bottom of containing div------ 

Answer 1

您可以在tr的高度設置爲1px所有行，但最後。

html, body{width:100%;height:100%;margin:0;} 
 
table{ 
 
    table-layout:fixed; 
 
    height:100%; 
 
} 
 
table tr{height:1px;} 
 
table tr:last-child{height:auto;} 
 
table td{vertical-align:top;border:1px solid #ccc;}

<table> 
 
    <tr><td>line 1</td></tr> 
 
    <tr><td>line 2</td></tr> 
 
    <tr><td>line 3</td></tr> 
 
    <tr><td>line 4</td></tr> 
 
    <tr><td>line 5</td></tr> 
 
    <tr><td>last line</td></tr> 
 
</table>

Answer 2

您可以使用CSS :last-child，如：

tr:last-child 

Answer 3

使用此行CSS選擇器：

tr:last-child { height:300px; }