Vertical alignment and table height
The following three tables have heights of auto,
30px, and 500px. The first one should have
the height of the sum of its rows. The second and third can be handled
however the browser wants, but there just here to make sure it does
something reasonable.
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
These tables test percentage heights. The first should be its
natural height; the second should be 50% of the height of the div
(600px), which is 300px.
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
The following tests test height on table rows.
A value of auto requires the minimum height needed by
the cells. In a simple case, this is just the height of the tallest
cell (excluding the increased padding, of course, since with the padding
the cells have the same height):
However, vertical-align values of baseline (the default,
but could be overridden in a UA stylesheet)
can make it taller than that:
The exact same thing should happen when the given height for the
row is too small:
Padding should also be able to increase the height (here the
first cell has 20px padding-top and the second has 20px of padding-bottom):
These two tables should be 200px tall, because of a height on the table
row. The second one should have its first and second cell's contents
offset from the middle by 10px (bottom, then top):
The behavior of percentage heights on table-row or table-row-group
is undefined. However, I think they should be ignored, so these tables
should look normal:
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
The following table should look normal, since very small heights
get ignored:
So should this one, for auto cell heights:
These tables should look the same - all cells should be 100px tall
with the text at the top of the cells:
In these four tables, the text should be 20px lower each cell, but should
otherwise look like the above three tables:
These should have the text 40px from the top in every cell:
In each of the following tables, three of the cells should have
the same baseline of the first line, and the three so marked should be
aligned top, middle, and bottom:
| Data |
Data |
Data |
Top |
Middle |
Bottom |
| Top |
Middle |
Bottom |
Data |
Data |
Data |
| Data |
Top |
Middle |
Data |
Bottom |
Data |
| Top |
Data |
Data |
Middle |
Bottom |
Data |
| Top |
Data |
Bottom |
Data |
Data |
Middle |
(Back to
CSS Testing Information,
David Baron)
LDB,
dbaron@dbaron.org