IE10 issue with rendering elements vs JS execution

I'm having trouble with a tableview in IE10. For some reason IE10 tries to measure the widths of the cells before they are drawn on the screen, whilst other browser do not. The difference can clearly be seen when placing a breakpoint in IE10 vs another version/browser.

The code is pretty complex but I've managed to create a snippet which reproduces the issue:

var cells =40;var rows =1000;

console.clear();function measure(obj){
    obj = $(obj);
    console.log(obj.getWidth());}var randomNumber =function(scale, offset){
    scale = scale ||10;
    offset = offset ||50;return(Math.floor(Math.random()*11)* scale)+ offset;};var output ="<table><thead><tr>";for(var i =0; i < cells; i++){
    output +="<th width='"+ randomNumber()+"'></th>";}

output +="</tr>";for(var j =0; j < rows; j++){
    output +="<tr>";for(var i =0; i < cells; i++){
        output +="<td></td>";}
    output +="</tr>";}

output +="</thead><tbody></tbody></table>";
$(document).body.insert(output);

$$('th').each(measure);
DEMO: jsfiddle.net/Nwp5A/1/

Now depending on the amount of columns and rows IE10 will return the correct widths or when more complex, it will return 0 for all (you can tweak the numbers to test this).

I've tried delaying the getWidth function with a loop while returning 0 but all that does is lock up the browser and returns 0 eventually as well. Any ideas how I can make IE10 return the correct width?