Avoid stretching of table lines with fixed table height and variable number of rows?

Question

I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.

Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.

I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.

What can I do? I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.

Answer 1

I guess this is not doable.

Answer 2

Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).

By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.

Answer 3

Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space

Answer 4

Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:

Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.