Is it possible to truncate a table within a div in such a way that the overflow occurs on a row boundary? The table can have arbitrary rows and sometimes expands to accommodate more than one line of text. The div itself has a fixed height with overflow:hidden.
For example, is there a way to make the content look like this:
The challenge here is that Javascript cannot be used. Is it achievable through HTML/CSS only? I could implement something in the code-behind for ASP.NET Webforms if necessary, but my preference is to avoid it.
This solution needs to be compatible with IE7 and IE8. The number of rows displayed is not fixed; it depends on how many rows overflow with extra text.