Force <tr> height with CSS
css, html-table
Solution
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.
Problem
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?