0

I am having a table which is wider than the screen, and some td's also contain a lot of text. How to limit the row height to 3 lines (and let the table become even wider)?

Here: How to hide Table Row Overflow? is a very similar question, except that I need 3 lines not just 1. So whitespace: nowrap does not work for me.

I tried max-height: 3em on nested divs, like this:

<td><div>a lot of text...</div></td>

but it just causes the div contents to clip (the div's width remains constant!, even if I set width: auto or width: 100%).

BTW I don't want table-layout: fixed, because I don't want to specify column widths manually.

Thanks!

Community
  • 1
  • 1
stf
  • 591
  • 1
  • 4
  • 19

2 Answers2

0

why cant you have the full table as div, so that you can specify height to the div, and limit the lines of text through overflow-y:hidden. simple way other than table.

Manikandan
  • 1,234
  • 11
  • 18
-1

Add the css style overflow-y: scroll; to your cell.

I've updated the JSFiddle below to demonstrate.

rageandqq
  • 2,221
  • 18
  • 24
  • I don't want scrollbars, I want the column width to expand! – stf Jul 07 '14 at 17:46
  • If you resize the window on the JSFiddle you'll see that the columns are expanding! There is just too much text. The columns can only expand as much as the width of the screen. The other two columns have already shrunk as much as possible to accommodate third column and its massive text. – rageandqq Jul 07 '14 at 17:48
  • Well but as I said, the `table` is wider than the screen (viewport). I try to emulate it here: http://jsfiddle.net/F6S5J/ . I need the outer `div` to expand its `width` so the `td` scrollbar disappears. – stf Jul 09 '14 at 14:37