如何将表格行高设置为除最后一行之外的最小值？答案

【问题标题】：How do I set the table row heights to minimum except last row?如何将表格行高设置为除最后一行之外的最小值？
【发布时间】：2015-09-13 18:11:34
【问题描述】：

我正在尝试制作一个表格，其中的行只占用垂直所需的空间。有没有办法在不将最后一个单元格设置为 100% 的高度的情况下使用 CSS 来做到这一点？

这个问题与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------

【问题讨论】：

试试:last-child伪选择器，比如tr:last-child
我们能否看到您的实际代码/演示来复制您遇到的间距问题？

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

你可以使用 css :last-child 喜欢：

tr:last-child

【讨论】：

【解决方案3】：

使用这行 CSS 选择器：

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

【讨论】：