CSS: Scrollable Nested Table, works in FF, fails in IE

<html>
<body>

<style type="text/css">
#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 95%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}
</style>

<div id="test">
<table>
<tr>
<td colspan="2">

<div class="scrollable">

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</    td>
</tr>

</table>

</div>

</td>
</tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</body>
</html>

#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 50%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}

.scrollable {
    height:40px;
    width:100%;
    overflow-x:scroll;
    overflow-y:none;

}