This is a simple example of table height problems with only a single table.

The indention here is to specify a table with two rows. The table has a fixed overall width (200 for the example) and two rows. The first row 'just high enough' for a title line, and the second contains the rest. Creating such a table is hamperd by a number of bugs

  1. If a height is specified for only one row (not both) then it will be ignored
  2. If specified heights are insufficient (because the content is too large) then the entire table will be expanded.
  3. Percentage heights appear to simply be translated into pixel heights prior to other processing, so offer no additional solutions

This following table ought to give the desired results (small title line, large body)

It is specifiable as

Table height: 200
First Row : 1 or 1% (i.e. expand to minimum required)
Second Row : unspecified (i.e. table height - height of other rows+borders)

title line
rest of space

This doesn't work because of the 1st bug above.

A second attempt is to specify heights that do add up to the total.

Table height: 200
First Row : 1
Second Row : 199

title line
rest of space

This appears ok, but close inspection will show that the table is now >200 pixels high (2rd bug).

A third attempt using 1% and 99% gives identical results (3rd bug).

A related bug is the the height of a row that is not specified explicitly cannot be used by its children.

This example is a table of height 200 with a single row of unspecified height. This contains a DIV whose style is height:100%. It ought to fill the entire table.

A 100% div inside a row of unspecified height