Home > Programming / tutorials > IE7 ignores table width

IE7 ignores table width

There has been a problem in using table width in IE7.

The pre tags in IE 7 do wrap the text but the table width will remain wider and scrollbar appears, as if the text is taking full space. This problem doesn’t come in Firefox and Chrome. Can anyone help me out defining proper style for IE 7 for pre tags. for eg of you look at this code

 <style type="text/css">

pre {
width: 600px;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 display: block;
<table width="70%" border="1">
 <tr> <td width="100%">
<pre> This is sample long text only to test IE 7 table width and it should be wrapping around but that does not happen . So we will have to find a solution </pte>
</td> </tr> </table>

You would not face this problem in Firefox or IE8.  It only happens with IE.

Solution : Use  table-layout: fixed;

If you apply the table-layout:fixed style for the inner table, where the data is in different columns, all columns get same area irrespective of their defined width.  But if applied it to the outer table, and it works fine.

Categories: Programming / tutorials Tags: , ,
  1. April 6th, 2012 at 01:01 | #1

    Hi, Neat post. There’s a problem with your website in internet explorer, would check this… IE still is the market leader and a good portion of people will miss your fantastic writing because of this problem.

  2. September 15th, 2011 at 12:46 | #2

    I’m executing a thing of the identical interest and will also be taking be aware about this .Thanks a lot.

  3. January 20th, 2011 at 20:02 | #3

    Mianem ksiazek elektronicznych nie okresla sie kompleksow dokumentow HTML, poniewaz nie sa one jednolitym plikiem, jednakze taki pogrupowanie ma jak wiadomo stanowczy zasady moralne.

  1. No trackbacks yet.