Datagrid innerHTML rownumbers alignment problem

[can2pic]

Hi,
I save my datagrid to a blob and download as an rtf file to view in word, this works fine except the datagrid rownumbers are not aligned with the data rows

Code:

$('#tt').datagrid({
 title:'Report',
 width:750,
 height:460,
 remoteSort:false,
 singleSelect:true,
 rownumbers:true,
 nowrap:false,
 fitColumns:true,
 toolbar:toolbar,
 url:'./json/datagrid_Intfaults.json',
 
columns:[[
        
		{field:'Active',title:'Active '},
                {field:'Historic',title:'Historic '},		
                {field:'Status',title:'Status',styler:cellStyler}
	    ]]





function saveTextAsFile()
{   
    var textToWrite =  $('#tt').datagrid('getPanel').html();
    
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = Qn;
    var downloadLink = document.createElement("a");
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    downloadLink.download = fileNameToSaveAs;
    downloadLink.click();    
}
		
		});

Example of saved file, as you see the row numbers do not align with the data any suggestions how to correct this?

UpdateSave

1
2
3
4
5
Active   Historic    Status
4166      Active   b7    
4166      Active     b6    
4166      Active    b5    
4166      Active    b4    
4166      Active     b3    
4166      Active       b2    


Thanks

Paul