Force <tr> height with CSS

Question

I need to control the height of a table row--I have tried setting the height of the cells, but I'm hitting a brick wall. See demo.

tr.fixedRow,
tr.fixedRow td.fixedCell {
     height: 50px;
     overflow: hidden; }

I know that I could change the display of some things to block but doing so generally messes up the table in a bad way--I'm working with a rather complicated table that interacts with other tables nearby and needs to line up pixel-perfectly, so generally, changing the display and then trying to make it look like a table again with CSS isn't a good solution for me, because it won't match up. I need it to stay a table.

I also want to avoid doing this:

<td><div>
   ... cell content...
</div></td>

Which seems like terrible form. Surely there is a CSS only solution to something so simple?

Answer 1

You are trying to achieve this by relying on a css property that does not work the way you expect it to: CSS overflow applies to block-level elements, something a <td> is not (css: display: table-cell;).

see CSS Overflow on MDN

For this reason, I believe you won't be able to achieve fixed height unless you set display: block; on <td>s - and you said you can't as it would break the table alignment, so the only sensible alternative would be, in my opinion:

<td><span>...</span></td>

with your <span> set to display: block; (doesn't really make a difference to have a span set to block instead of a div, apart from the fact that a div would break the html validation, while a span would not - block elements are not allowed in td elements)

it's the most elegant and valid way I can think of.