html - 表格宽度超出了 div 边框

Question

我在 div 中有表格。如果我用 IE9 或 FF 查看它就可以了。但如果我在 IE8 中查看它，表格会超出 div 边界。有什么想法吗？

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

Answer 1

在这里找到解决方案:

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.