IE6 中 table CSS width 100% 溢出的解决

作者：vkvi 来源：ITPOW（原创）日期：2013-11-27

看如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<div style="width:300px; height:100px; overflow:auto;">
    <table style="width:100%; height:200px; border:1px;">
        <tr>
            <td>1</td>
        </tr>
    </table>
</div>
</body>
</html>

看看在 IE 6 中的效果：

IE6 中 table width 100% 溢出的解决

纵向滚动条出现是正确的，因为高度超过了外框的高度，但横向滚动条出现就是一个 BUG 了，IE 6 忽略了纵向滚动条占用了宽度，它的 100% 还是按的 300px 来算的，这当然显示不下了，就出现了横向滚动条，也就出现了“装不下”、“溢出”的情况。正确 100% 应该按 300px - 纵向滚动条宽度来算。

解决办法：

table 外加一层 div，设置 zoom:1。

<div style="width:300px; height:100px; overflow:auto;">
  <div style="zoom:1">
    <table style="width:100%; height:200px; border:1px;">
        <tr>
            <td>1</td>
        </tr>
    </table>
  </div>
</div>

电邮：cftea@126.com