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

| Data | Data
Data | Data |

However, vertical-align values of baseline (the default, but could be overridden in a UA stylesheet) can make it taller than that:

| Data | Data
Data | Data
Data |

The exact same thing should happen when the given height for the row is too small:

| Data | Data
Data | Data
Data |

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

| Data | Data | Data |

| Data | Data | Data |

These two tables should be 200px tall, because of a height on the table row. The second one should have its second and third cell's contents offset from the middle by 10px (bottom, then top):

| Data | Data
Data | Data
Data |

| Data | Data | Data |

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:

| Data | Data | Data |

So should this one, for auto cell heights:

| Data | Data | Data |

These tables should look the same - all cells should be 100px tall with the text at the top of the cells:

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

In these four tables, the text should be 20px lower each cell, but should otherwise look like the above three tables:

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

These should have the text 40px from the top in every cell:

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

| Data | Data | Data |

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, [email protected]