Set the max-height element in html table

Question

I realise that this question has probably been asked to death, but none of the answers I have found seem to work. I have an ASP repeater control, in which I have set the ItemTemplate to have a simple table with two rows.

When populating the rows, I want the rows to stay the height I have set them, not grow to the size of the content.

I have tried setting style="max-height:100px; overflow:auto"; on the table, table row and table data which did not do a thing.

How do I ensure that my repeater template are always the same height, not the height of their content?

Answer 1

I think you need a solution like this css:

table{
  width:200px;
  table-layout:fixed;
}

tr{
   white-space:nowrap;   
}

td {
  height:20px;
  white-space:inherit;
  width:100px;
  overflow:hidden;
}

Fixed table layout: The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. Allows a browser to lay out the table faster than the automatic table layout.

white-space: nowrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

overflow: hidden: The overflow is clipped, and the rest of the content will be invisible

works in most modern browsers.

fiddle here

Answer 2

Your CSS should be { height: 100px; max-height: 100px !important; overflow: hidden; }

• first it will set the height
• then it will set the maximum height - you'll want to keep this the same. It will also tell the browser that this is more important than the previous setting of height. You only set that to make sure IE stays in line, as IE8 and lower does not read max-height at all, or poorly at best.
• last, overflow should be "hidden", that way you'll hide the content. Unless that's not what you wanted to do?

If you want scrollbars, I'm afraid a TD or TR isn't the best way to go. You need to put a div within each TD and set the above CSS to that instead. In other words, you need more nesting.

Answer 3

Make sure you are applying those CSS properties (particularly overflow:hidden) to the repeating parent block element. Doing it to a child element will not be helpful if the parent is expanded and doing it to an inline element will not affect it because inline elements necessarily use the size of their contents.