Geek Answers Handbook

HTML table width in IE?

I am using a table to display a dataset, my HTML code is 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 fine in firefox, safari and IE8. But the problem arises in IE7, IE6 .. while the table expands and exits the screen (that is, expands to the right side along the x axis) .... is there a hack for it?

screenshots of IE6 in IETester:

enter image description here

+7
html css html-table
source share
5 answers

The problem is resolved because 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>

there are three changes in the code above ...

  • the width attribute is set in the table tag (instead, it is set in the style attribute) Tag
  • col is set with width just like table width
  • and in TD style, overflow is set to hidden (overflow: hidden).

I got this information from the link below, please check everything ... " http://www.tek-tips.com/faqs.cfm?fid=4499 " and therefore my problem has been resolved.

+2
source share

Use the CSS below and this should prevent your table from exceeding the maximum size that you define:

 table{ table-layout:fixed; }
+18
source share

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

+2
source share

Try

 <table border="1" cellspacing="0" cellpadding="0" width="780">
0
source share

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

Something else on your web page should influence the layout, so please write a complete example.

This is a complete example that 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>
0
source share

More articles:


All Articles