IE6,7 表格display:none导致表格错乱的问题

前端显示遇到个IE6,7显示异常的问题,具体表现:

表格有若干列,4行
第一行为隐藏行 tr display:none
第二行为表头 rowspan为3,3,2,3,2,1
第三行为合并表头 只有两列,rowspan为1
第四行为隐藏行 共有6列数据 tr display:none

结果发现IE中表格异常,rowSpan为3的单元格竟然高度和1的一样,rowspan=2的反而显示正常



如图。

其实根本原因是rowspan的设置有问题,但是Chrome,FF,IE8貌似能自动校正,IE6,7不能。

后来发现把第四行删掉就没有这个问题了,查了查TR的display:none会对表格结构产生影响,因此把第四行TR的display去掉,在每个TD都加入了display:none,问题解决。

显示上稍微有点不整齐  不过比更错落的已经好很多了


<html>
<head>
<title>123</title>
</head>
<body>
<table border="1">
<tr>
    <td>one</td>
	<td>one</td>
	<td>one</td>
	<td>one</td>
	<td>one</td>
	<td>one</td>
	<td>one</td>
  </tr>
  <tr>
    <th rowspan=3>3</th>
    <th rowspan=3>3</th>
	<th rowspan=3>3</th>
	<th rowspan=2>2</th>
	<th rowspan=2>2</th>
	<th rowspan=3>3</th>
	<th rowspan=1>1</th>
  </tr>
  <tr>
    <td rowspan=1>two</td>
  </tr>
  <tr>
    <td  style="display:none">two</td>
	<td style="display:none">two</td>
	<td style="display:none">two</td>
	<td style="display:none">two</td>
	<td style="display:none">two</td>
	<td style="display:none">two</td>
	<td style="display:none">two</td>
  </tr>
</table>
</body>
</html>
  • 大小: 2.9 KB
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值