除最后一行外，如何将表格行高设置为最小值？

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