Internet explorer 9 wrapped in a table div consisting of inputs select / uncheck

I have a table consisting of inputs in cells

There is a strange bug (in IE9 I haven't tested it in other versions of IE) after moving between inputs (or after select / deselect) the table-table parent div starts to expand if the overflow is: auto; property is set and if there is horizontal scrolling

What it looks like:

Sample link try to select some rows in the table

HTML:

<div class="maindiv">
    <div class="gridwrapper">
        <table>
            <thead>
                <tr>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                    <th>Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                </tr>
                <tr>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                    <td><input type='text' value='Cell'/></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="bottomdiv">
        <label>AddRow</label>
    </div>
</div>

      

        
        
        
      

    

CSS

.gridwrapper {
    max-height: 150px;
    overflow: auto;
    border: 1px solid black;
}
.maindiv {
    width: 400px;
    border: 1px solid gray;
}
table {
    width: 100%;
}

      

        
        
        
      

    

Does anyone know how to fix this problem?