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

使用这一行CSS选择器：

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

Answer 2

您可以为所有行设置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 3

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

tr:last-child

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

3 个答案: