Css sets maximum table height despite contents

Question

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

what i want http://i32.tinypic.com/s0zxom.png

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

what i get is http://i32.tinypic.com/34in7rt.png

I tried using

overflow:hidden

for <tr>, <td> and do the same by placing the contents inside <div>, but none of them achieve what I'm looking for. Any ideas on how I can limit the line height to an absolute value using any additional content rather than a line extension? I would prefer to save it in a table, but if this is not possible, and I need to use a different display technique, I am open to this idea.

Answer 1

When you use the solution div, have you tried to set the height for yourself div, giving it a style overflow: hidden?