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

I am trying to make a table with rows that take up only the space they need vertically. Is there any way to do this with CSS without setting the last cell to a height of 100%?

我正在尝试制作一个表格,其行只占用垂直所需的空间。有没有办法用CSS做这个而不将最后一个单元格设置为100%的高度?

This question is pretty similar to this question only in the other direction.

这个问题与其他方向的问题非常相似。

Currently looks like this:

目前看起来像这样:

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

how do I get it to look like

我该如何让它看起来像

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

or, alternatively like:

或者,或者像:

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





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

3 个解决方案

#1

You could set the height of the tr to 1px for all rows but the last.

您可以将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>

#2

use this line of CSS selector :

使用这一行CSS选择器:

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

#3

You can use css :last-child like:

您可以使用css:last-child:

tr:last-child

#1