CODEWITHSUNDEEP
htmlcss
qris
qris

Reputation: 8192

How to hide table row overflow (take 2)

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:

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.

Upvotes: 1

Views: 1031

Answers (2)

C3roe
C3roe

Reputation: 96455

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”

Upvotes: 1

nietonfir
nietonfir

Reputation: 4881

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 */
}

Upvotes: 0

Related Questions