Take the 2-minute tour ×

I have a table with a fixed layout. Columns are set to be 25% wide (four columns) and rows are set to be 20% in height (5 rows). I have some text that is larger than that side and it is overflowing into the next row. I have set overflow: hidden, but it doesn't seem to apply to <td>. If I do white-space: nowrap it doesn't take advantage of the 20% height set to the cell, it just takes up one line.

How can I work around this so the text is wrapped, but cut off at 20% height?


share|improve this question
show us some of your code ... it will be easier to give concrete answers. –  Martin Turjak Jul 17 '13 at 17:22
add comment

1 Answer

Table cells are difficult to style. The usual solution is to wrap the contents in a div, so

   original contents


      original contents

and then apply the styles you had for your td to the div.

share|improve this answer
So this worked. It is a responsive page, so I had to use jquery to set the height in px everytime the page is resized. But now the text inside the <div> is not vertically centered (vertical-align: middle; does not work). Any ideas on how to solve this issue completely? –  cml Jul 18 '13 at 1:39
Hm, I made a fiddle that doesn't seem to have this problem. The table cell on the left (with only one line of content) is centered vertically, while the one on the right is overflowing. Do you have other styles or requirements that prevent this from happening? –  Mr Lister Jul 18 '13 at 7:02
Oh, I see the fiddle above does not work with Chrome. Apparently, Chrome has problems keeping the height of the table down to what I specified. Now you can give the divs a height as an absolute value (new fiddle) but then it won't be a percentage of the total height any more. Is that a problem? –  Mr Lister Jul 18 '13 at 7:11
add comment

Your Answer


