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.