先看看浏览器生成table差别。
<!DOCTYPE HTML>
<html>
<head>
<title>table.html</title>
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<style type="text/css">
body{padding:1px;margin:1px;}
table{background-color:#aaa;margin-bottom:10px;}
td{padding:0px;margin:0px;background:white;}
tr{height:20px;}
.w_100{ width:100px;}
.w_200{width:200px;}
.w_500{width:500px;}
.content_width{width:500px;height:18px;}
</style>
</head>
<body>
<table width="100%" cellspacing=1>
<tr>
<td colspan="4" ><div class="content_width"></div></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="3"></td>
</tr>
<tr>
<td class="w_100"></td>
<td class="w_200"></td>
<td class="w_100"></td>
<td></td>
</tr>
</table>
</body>
</html>
我想要的是这样的table,chrome、firefox、opera中表现是所期待的
IE8中,浏览器会先确定table的最小宽度,然后按比例增大其他行的td,不论td是否设置了宽度
生成表格之后,IE8 chrome firefox opera改变浏览器窗口大小,IE8 chrome firefox opera 表现一致,都只会影响没有设置宽度的td,而不会影响设置了宽度td,除非是最后一个td(贴着table右边的那个td)。
现在来看下IE6/7的表现
在生成table的方式和IE8一样,但是浏览器窗口缩放表现不一致
table整体都会随着浏览器窗口缩放,无论td是否设置了宽度
但当我将table的第一行的那个td设置width属性的时候
<td colspan="4" class="w_100"><div class="content_width"></div></td>
浏览器缩放表现和IE8一样,这可能是IE8对IE67的一些改进(添加width属性对IE8没有影响)
暂时到这,如果有问题希望您能指出来,谢谢。