Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

4
  • If you set up a height to your vertical class you will solve it (height: 120px;). Also, I would recommend you to fix first header to the bottom (vertical-align: bottom;) Commented Jan 21, 2019 at 17:34
  • @gengns as I mentioned in the first sentence of my question, I want to do this "without explicit sizing for height", although I could make it clearer why - it's because this will be styling multiple tables which will contain headings with different content so they'll need to be different heights or there'll be wasted space or headings partially cutoff. Commented Jan 21, 2019 at 17:55
  • Why don't you set a min and max height? I would recommend you to check MDN "Browser compatibility table" approach here for example developer.mozilla.org/en-US/docs/Web/CSS/grid (at the bottom) if you are using long headings. If you want different directions, length can vary a lot and don't want to have big empty spaces, you can use CSS Grid. Commented Jan 21, 2019 at 18:11
  • @gengns I'd already checked that, sadly MDN is using an explicit height, probably because the headings are consistent so they can set the heading height specifically. I'm not sure how grid would help here? Commented Jan 21, 2019 at 18:20