How do I set the table row heights to minimum except last row?

Question

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%?

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

would we be able to see your actual code/demo that replicates the spacing issue you are having? — indubitablee, Jun 26 '15 at 17:49

score 1 · Answer 1 · answered Jun 26 '15 at 17:45

1

use this line of CSS selector :

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

answered Jun 26 '15 at 17:45

eshirvana

23,227
3
22
38

score 1 · Accepted Answer · answered Jun 26 '15 at 17:47

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

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>

score 0 · Answer 3 · edited Jun 26 '15 at 17:46

0

You can use css :last-child like:

tr:last-child

edited Jun 26 '15 at 17:46

Litestone

529
7
22

answered Jun 26 '15 at 17:44

Sven van den Boogaart

11,833
21
86
169

How do I set the table row heights to minimum except last row?

3 Answers3