Html代码
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%">
<tbody>
<tr>
<td><span>全称</span></td>
<td><span>简称</span></td>
<td><span>地址</span></td>
<td><span>销售量</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--标题结束-->
<tr>
<td>
<div style="overflow-x: hidden; overflow-y: auto; width: 100%; height: 295px;">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><span>IBM 中国有限公司 </span></td>
<td><span>IBM</span></td>
<td><span>北京市朝阳区工体北路甲 2号 盈科中心 IBM 大厦,25层</span></td>
<td><span>3</span></td>
</tr>
<tr>
<td><span>微软(中国)有限公司</span></td>
<td><span>微软</span></td>
<td><span>北京市朝阳区霄云路38号盛世大厦19层</span></td>
<td><span>2</span></td>
</tr>
<tr>
<td><span>移动公司</span></td>
<td> <span>北京移动</span></td>
<td> <span></span></td>
<td> <span>1</span></td>
</tr>
<tr>
<td rowspan="11"> <span>联通公司</span></td>
<td> <span>上海联通</span></td>
<td> <span></span></td>
<td> <span>5</span></td>
</tr>
<tr>
<td> <span>北京联通</span></td>
<td> <span></span></td>
<td> <span>4</span></td>
</tr>
<tr>
<td> <span>哈尔滨联通</span></td>
<td> <span></span></td>
<td> <span>10</span></td>
</tr>
<tr>
<td> <span>天津联通</span></td>
<td> <span></span></td>
<td> <span>12</span></td>
</tr>
<tr>
<td> <span>广州联通</span></td>
<td> <span></span></td>
<td> <span >6</span></td>
</tr>
<tr>
<td> <span>拉萨联通</span></td>
<td> <span></span></td>
<td> <span>11</span></td>
</tr>
<tr>
<td> <span>杭州联通</span></td>
<td> <span></span></td>
<td> <span>8</span></td>
</tr>
<tr>
<td> <span>海南联通</span></td>
<td> <span></span></td>
<td> <span>14</span></td>
</tr>
<tr>
<td> <span>深圳联通</span></td>
<td> <span></span></td>
<td> <span>7</span></td>
</tr>
<tr>
<td> <span>苏州联通</span></td>
<td> <span></span></td>
<td> <span>9</span></td>
</tr>
<tr>
<td> <span>青岛联通</span></td>
<td> <span></span></td>
<td> <span>13</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
IE8下现象(标准ie8才会出现)
然而在ie的其他模式下不会出现这样的问题。
分析:
理论上因为下面table的宽度没有超过屏幕的宽度,不会出现滚动条,但是在ie8下却出现了,而且还没有滑动块,如果去掉rowspan属性,则正常,但是如果去掉rowspan属性就的重新修改布局。
经过查找属性,发现如果数据表外层的div元素的overflow-y导致的,如果去掉则正常。
解决方法:
使用js,来比较存放数据表的div的高度和数据表table的高度,如果div的高度大于数据表table的高度,使用js去掉overflow-y属性,反之则加上overflow-y:auto属性,问题得到了解决