Why does the table not stretches to 100% width

Above is the image, where left side is an accordion, and right side is content part (inside a table) I am concerned about the content part(right side) why is the table not 100% width? while the heading on top of it is expanded to full page width. Given below is my code for the content.

var i=0;
var filesystem=[];
$(xml).f开发者_运维问答ind('file').each(function(){ 
    //console.info($(this).attr('total')+", "+$(this).attr('free')+", "+$(this).attr('used')+", "+$(this).attr('percentage'));
    var row={};
    row.id=i++;
    row.total=$(this).attr('total');
    row.free=$(this).attr('free');
    row.used=$(this).attr('used');
    row.percentage=$(this).attr('percentage');
    filesystem.push(row);
});


$('#detailTable').empty();
$('<div width="100%">')
.attr('id','diskUsageSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;Disk Usage</div>'+
        '<table id="list1" width="100%"></table>'+
        '<div id="gridpager"></div>'+
    '</div>')        
.appendTo('#detailTable');    


jQuery("#list1").jqGrid({
    datatype: "clientSide",
    height: 250,
       colNames:['id','Total Space','Free Space', 'Used Space', 'Used Percentage'],
       colModel:[
           {name:'id',index:'id', width:90, align:"right"},
           {name:'total',index:'total', width:90, align:"right"},
           {name:'free',index:'free', width:90, align:"right"},
           {name:'used',index:'used', width:90, align:"right"},
           {name:'percentage',index:'percentage', width:120, align:"right"}
       ],
       pagination:true,
       pager : '#gridpager',
       rowNum:10,
    viewrecords: true,
    gridview: true,
    edit:false,
    add:false,
    del:false

});


for(var i=0;i<filesystem.length;i++)
    jQuery("#list1").jqGrid('addRowData',i+1,filesystem[i]);

jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");

You can use either height: 'auto' or scrollOffset:0 jqGrid options to fix the problem. The reason is the way how the grid width will be calculated. It is not perfect and always reserves some additional place for the scroll bar.

Another options like autowidth:true or shrinkToFit:false can be also used in some situations.

If you using jqxGrid, you can try to set width for all columns in percents, so sum of it will be 100%, it helped me to get rid of this empty space in grid.