1

I have some string of characters (all are only alphabetic and rare newlines, no whitespaces or any other separators) which I would like to fill in the table cell, up to cell width (is varying depending on window size, is set to 50% in the example). I want the browser to hardly wrap the string when table cell width is hit but also welcome the newline characters in the string. The contents in the table cell should have the given fixed minimum width (200px in example below), which should cause the vertical scroll to appear if window is resized further. This moment when window have just become too small I show on this screenshot:

enter image description here

I have achieved the needed behaviour in FF10 by using max-width for td (playground), but I can't do the same for IE: it ignores max-width. More over it has very strange behaviour when max-width is set on pre: the renderer ignores the actual width of the contents and thinks that pre was not wrapped (playground – compare to FF; similar problems reported here and there). In worst case it is OK to have the contents strictly fixed to 200px (which should be applied to pre for IE, one applied to td does not have any effect). In order this fix to affect only IE I have tried the following CSS:

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    width: expression("200px");
}

td.wrap {
    color: red;
    max-width: 200px;
}

Unfortunately, does not work for IE8.

Target browsers: FF9 (ans higher), IE7, IE8, Chrome (latest).

Sorry if this issue is a duplicate: I have checked How do I wrap text in a pre tag?, How can I word wrap this list item?, Not able to do max width, Max-Width not working on Table for IE7 and many others: no definite solution found for IE.

Community
  • 1
  • 1
dma_k
  • 10,431
  • 16
  • 76
  • 128

1 Answers1

1

I've tried to approach the problem from another side :) Wrap the table around in a div with min-width: 400px and that makes IE bahave. Here's the fiddle: http://jsfiddle.net/6Agbw/3/ . Hope this is what you need.

Spadar Shut
  • 15,111
  • 5
  • 47
  • 54
  • Thanks, it seems to work. P.S. You can safely remove your previous answer. – dma_k May 14 '12 at 11:20
  • Ah, you used the table `table-layout: fixed`. I should have removed this from my playground, because it is causing problems when table has more then 2 columns in this case, see [here](http://jsfiddle.net/6Agbw/7/). Any ideas how to make this working? – dma_k May 14 '12 at 13:22
  • The closest I could get is this: http://jsfiddle.net/6Agbw/11/. Note the s in the table. Also I couldn't avoid using `table-layout: fixed` and breaking the text in short `td`s. Probably rotating text in these `td`s could help you. – Spadar Shut May 14 '12 at 22:09
  • It looks like fixed table layout (+ fixed column widths) is the only solution. Thanks for your efforts! – dma_k May 15 '12 at 09:48