前端显示遇到个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,问题解决。
显示上稍微有点不整齐 不过比更错落的已经好很多了
表格有若干列,4行
第一行为隐藏行 tr display:none
第二行为表头 rowspan为3,3,2,3,2,1
第三行为合并表头 只有两列,rowspan为1
第四行为隐藏行 共有6列数据 tr display:none
结果发现IE中表格异常,rowSpan为3的单元格竟然高度和1的一样,rowspan=2的反而显示正常
![](http://dl.iteye.com/upload/attachment/557651/f53a4f2f-cdc1-34e5-9216-2a18e17e176a.jpg)
如图。
其实根本原因是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>