How to hide table row overflow (take 2)

Question

I need to ensure that all rows of my table are fixed height, even if the cells contain content with embedded line breaks or other characteristics that would otherwise cause them to enlarge.

Basically I just want to set td { height: 1.2em; overflow: hidden; } but that doesn't work for reasons that are still a mystery to me.

What I've tried:

• table { table-layout:fixed; } from How to hide Table Row Overflow.
• table { display: block; } just makes it wider.
• td { white-space: nowrap; } doesn't affect the embedded <br />.
• td { line-height: 0; } reduced row height, but the text rows overlap each other unreadably (from Setting table row height in CSS)
• tr { height: 1em; } and td { height: 1em; } combined made no difference (from How to fix height of TR)
• td { text-overflow: ellipsis; } made no difference
• table { height: 1em; } made no difference (from css: fix row height)
• I don't want to use Javascript hacks like CSS: Truncate table cells, but fit as much as possible

The only thing that seems to work is td { display: block; }, but I'm wary of this because, as far as I know, browsers don't really know how to render something that's not a table-cell inside a table. Is this actually supported? Is there a better alternative?

You can see and fiddle with the combinations that I've attempted on jsbin.

Background: This is for a data grid component, similar to dgrid, and if the rows change size as you scroll up and down, it results in jumpy, vibrating scrolling and an unhappy user experience.

Answer 1

If you fear for unforeseen consequences of display:block for the TD elements, then I’d suggest that you instead wrap the content inside the TD inside a container element (DIV), and give that height:1em and overflow:hidden … works the same, but has no risk of table layout beeing messed up because of TD elements displayed as something else then table-cell.

td { height: 1.2em; overflow: hidden; } […] doesn't work for reasons that are still a mystery to me.

Not much of a mystery, look at the CSS spec for overflow:

“Applies to: block containers”

Answer 2

Have you tried setting <td> to display: inline-block;? Updated jsBin example.

td {
    height: 1em;
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: inline-block; /* this */
}