CODEWITHSUNDEEP
htmlcsscss-tables
cornwalker
cornwalker

Reputation: 103

css set maximum table row height despite content

I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.

what I want

All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.

what i'm getting

I've tried using

overflow:hidden

for the <tr>, <td>, and doing the same while placing the content within a <div> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.

Upvotes: 3

Views: 8116

Answers (1)

Sinan Taifour
Sinan Taifour

Reputation: 10795

When using the div solution, have you tried setting a height for the div itself while giving it an overflow: hidden style?

Upvotes: 4

Related Questions