Table inside jQuery UI Dialog rendering issues
===

I have a jQuery UI dialog on my page that pops up when a button is clicked. It works wonderfully, except that a scrollable table inside of it has problems. The table appears fine, but then when you try and scroll it up and down, only the right half of it scrolls correctly, while the left side gets all distorted. The whole table is scrolling, because if you highlight it with the mouse, it re-renders and appears as it should. Also, if you wait a good 10 seconds or so, sometimes it straightens itself out and works perfectly. The tables are only generally about 10-20 rows, so it's not a matter of size. Also, I am using Twitter Bootstrap, which applies some CSS to the table, though it hasn't caused problems in any of the other tables in my web page, and I can turn off all but the very base CSS skinning and it still has the problem, so I doubt it's a problem with Bootstrap. Below is my HTML for the table; it's pretty straightforward. 
    
    
    <div style="height:400px; overflow:auto">
    	    <table id="tasksTable" style="width: 50%" >
        	<thead>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
        		<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    		<tr>
    			<td>
    			</td>
   			<td>
    			</td>
    			<td>
    			</td>
    			<td>
    			</td>
    		</tr>
    	</tbody>
    	</table>
    </div>




This is an image of what happens to the table. As you can see, the left side is still at the top, while the right side has scrolled.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/Oaasl.png