views:

306

answers:

5

I am using table to display a set of data, my HTML code goes here...

<table border="1" cellspacing="0" cellpadding="0" style="width: 780px;">
  <tbody>
    <tr>
      <td style="width: 780px; height: 25px;">
        <pre width='100' style='width: 780px; word-wrap: break-word;'>
            the data goes here.....
        </pre>            
      </td>
    </tr>
    <tr>
      <td style="width: 780px; height: 25px;">
        <pre width='100' style='width: 780px; word-wrap: break-word;'>
            the data goes here.....
        </pre>            
      </td>
    </tr>
  </tbody>
</table>

this table works ok in firefox, safari, and IE8. But the problem arise in IE7, IE6.. asthe table expands and goes out of the screen(i.e expands towards right hand side in x-axis).... is there any hack to fix it?

the screen shots of IE6 in IETester.. "http://picasaweb.google.com/lh/photo/hrByy__sDIHsN8AT9y8IVA?feat=directlink"

A: 

Try

<table border="1" cellspacing="0" cellpadding="0" width="780">
Salil
no it did not work with IE7 and IE6.. still expanded towards right...
Harish Kurup
is it the only content on your page may be it happens because of you using it in some div.check it what happens with the only code given if not so.
Salil
A: 

you could try to set your pre to display:block; - it's yust an ide, i don't have an IE for testing that.

PS: why width='100' and width: 780px; ? thats conflicting...

oezi
it did'nt work...
Harish Kurup
check out the screenshots i have posted in the question to know about the problem...
Harish Kurup
A: 

I have just tested using your HTML and it looked identical in IE6, IE8 (compatibility mode) and IE8 (normal mode) as well as the same in Firefox.

Something else on your web page must be affecting the layout, so please post a full example.

This is the full example I tested.

<html>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" style="width: 780px;">
          <tbody>
            <tr>
              <td style="width: 780px; height: 25px;">
                <pre width='100' style='width: 780px; word-wrap: break-word;'>
                    the data goes here.....
                </pre>            
              </td>
            </tr>
            <tr>
              <td style="width: 780px; height: 25px;">
                <pre width='100' style='width: 780px; word-wrap: break-word;'>
                    the data goes here.....
                </pre>            
              </td>
            </tr>
          </tbody>
        </table>
    </body>
</html>
Sohnee
actually this table is formed dynamically at backend using PHP...there are headers.php, footers.php and content.php forming this page...
Harish Kurup
Hence the importance of showing us the whole page so we can re-create the problem.
Sohnee
A: 

the problem is solved, as i used the code as

<table border="1" cellspacing="0" cellpadding="0" width="780" style="table-layout:fixed">
<col width="780">
<tbody>
<tr>
  <td style="width: 780px; height: 25px; overflow:hidden;">
    <pre width='100' style='width: 780px; word-wrap: break-word;'>
        the data goes here.....
    </pre>            
  </td>
</tr>
<tr>
  <td style="width: 780px; height: 25px; overflow:hidden;">
    <pre width='100' style='width: 780px; word-wrap: break-word;'>
        the data goes here.....
    </pre>            
  </td>
</tr>
</tbody>
</table>

in the above code there are three changes... 1) in the table tag the width attribute is set(instead setting it in style attribute) 2) col tag is set with the width as same as the table width 3) and in TD's style the overflow is set to hidden,(overflow:hidden). i got this info from the link given below, please everyone check out... "http://www.tek-tips.com/faqs.cfm?fid=4499" and hence my problem was solved.

Harish Kurup
+1  A: 

You can also try the style word-break: break-all;

RodeoRamsey
i have solved my problem...by the above answer....and i will try to use word-break rule, and check if that works with all the browsers...and thank u @Rodeo Ramsey...
Harish Kurup