表格宽度超出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/

诀窍是使用CSS属性table-layout.它可以采用三个值:auto,fixed和inherit.正常(初始)值为auto,这意味着表格宽度由其列和任何边框给出.换句话说,如有必要,它会扩展.

你想要用的是table-layout:fixed.巴姆!现在,表格与CSS中指定的一样宽.不多也不少.令我惊讶的是,这似乎得到了浏览器的广泛支持.唯一不支持它的浏览器是IE/Mac,该浏览器的重要性正快速接近零.

接下来是决定如何处理不适合表中的内容.如果表只包含文本,则自动换行:break-word(在CSS3文本效果模块中指定自动换行)将强制浏览器根据需要中断单词以防止溢出.

Answer 2

您可以将它设置在自己的div中,overflow: scroll;以便在表扩展太多时创建滚动条...

Answer 3

将样式添加display:table到 div 标签。这会使元素表现得像一张桌子。