I want to have an HTML table with three rows. The center row (B) should size its height to as small as possible to fit its contents. The top and bottom rows (A and C) should size their height to fill the rest of the height of the table with equal heights.
In XAML this accomplished by using a Grid
and then giving the rows A, B, and C the heights *
, Auto
, and *
, respectively.
I tried using heights 50%
, auto
, and 50%
, respectively, in the HTML/CSS. But that causes row A to fill up half the height of the table, with B and C filling the bottom half.
How can I get the row heights I want using HTML/CSS?