table设置td宽度的浏览器差异

先看看浏览器生成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没有影响)



 

暂时到这,如果有问题希望您能指出来,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值