Table width goes beyond the div border

Question

I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?

<div>
  <table width="100%" >
    <tr>
      <td>
      </td>
    </tr>
  </table>
</div>

Answer 1

found the solution here:

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

The trick is to use the CSS property table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.

What you want to use is table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero.

Next is deciding what to do with the content that doesn’t fit in the table anymore. If the table only contains text, word-wrap:break-word (word-wrap is specified in the CSS3 Text Effects Module) will force the browser to break words as necessary to prevent overflow.

Answer 2

As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:

<table style="width:100%;table-layout:fixed">