8

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
brentonstrine
  • 21,694
  • 25
  • 74
  • 120
  • AFAIK, you can force a height with the HTML height attribute... – A.M.K Oct 30 '12 at 21:35
  • @A.M.K [Doesn't look like it.](http://jsfiddle.net/EUFxM/5/) – brentonstrine Oct 30 '12 at 21:38
  • Haven't checked, but this looks similar: http://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow#answer-1555073 – mayhewr Oct 30 '12 at 21:38
  • @mayhewr that one is close, but he wanted the table to be one row, and the answers all reflect that (e.g. use of `white-space:nowrap;` or controlling the width to make the heights match up). I am looking to give a row an arbitrary height, so solutions to that question won't help me much. – brentonstrine Oct 30 '12 at 21:42
  • Do you need the width of the column to be determined ahead of time? If not, you could set it to some percentage and set the cell to `position:relative` and put a div inside it that has `width:100%;position:absolute`. Would that work? – mayhewr Oct 30 '12 at 22:01
  • @mayhewr you might be on to something with the use of `position`, but if I'm going to nest a `
    ` under the ``s, then all I need to make it work the way I want is `.fixedCell > div {height:50px;overflow:hidden;}`.
     – brentonstrine Oct 30 '12 at 22:14
  • Oh. I totally missed that part of your question, sorry. I don't think that's *that* terrible. It is dumb that the `height` CSS property doesn't work on `td`s or `tr`s with overflow, I totally agree, but if that nested `div` works, it works. :) – mayhewr Oct 30 '12 at 22:19
  • It's not terrible at all - it's bad form to use unnecessary elements, but this isn't one. Part of the reason the `td` element doesn't accept straight height/overflow declarations is that the height isn't independent: it is affected by the other cells in the row. Parsing both the content and the CSS, and respecting widths/heights like a block element would be really complex. – Ben Hull Oct 31 '12 at 00:37

1 Answers1

16

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.

Luca
  • 9,259
  • 5
  • 46
  • 59
  • Couldn't have said it better myself. – Ben Hull Oct 31 '12 at 00:36
  • I don't see why setting the `span` to `display: block;` would keep it from validating... – krispy Jun 03 '15 at 02:52
  • 1
    indeed, I guess my answer wasn't particularly clear in that section, but what I meant was that having a `div` would throw a validation error; a `span` will not throw such error of course, as it's not a block element - w3c spec and its implementation in validation tool(s) does not care if the `display` property is set to `block` via CSS. I'll amend my answer to make it clearer! – Luca Jun 08 '15 at 14:06