如图我想在实现IE内实现上面的功能,但是IE最外的滚动条总是会自动出现,如果设置为overflow-y:hidden,外部的滚动条会消失,但内部的滚动条无法正常使用

以下为html的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
</style>
</head>
<body scroll="no">
<table style="width: 100%;height: 100%;border:none;border-collapse: collapse;">
<tr style="background: red;height: 1px;" id="top"><td><div><p>top</p><p>topppppp</p></div></td></tr>
<tr style="background: green;"><td>
<div style="height:100%; overflow-y:scroll">
<div style="height:1000px;">
<p>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br></p>
</div>
</div>
</td></tr>
<tr style="background: blue;height: 1px;" id="bottom"><td><p>botttom</p><p>botttommmmmmmmmmm</p></td></tr>
</table>
</body>
</html>