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

最新推荐文章于 2023-03-14 17:42:18 发布

wwwcomy

最新推荐文章于 2023-03-14 17:42:18 发布

阅读量1.2k

点赞数

分类专栏： all

本文链接：https://blog.csdn.net/wwwcomy/article/details/49098729

版权

all 专栏收录该内容

204 篇文章 0 订阅

订阅专栏

前端显示遇到个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>