当前位置: 代码迷 >> Web前端 >> IE6,7 表格display:none导致表格错乱的有关问题
  详细解决方案

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

热度:120   发布时间:2012-10-19 16:53:37.0
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>
  相关解决方案