爲什麼表中沒有口延伸到100％的寬度

Question

上面是圖像，其中左側是手風琴，而右側是內容部分（在表內），我關心的內容部分（右方）爲什麼表不是100％寬？而頂部的標題則展開爲整頁寬度。下面給出的是我的代碼content。請看看

var i=0; 
var filesystem=[]; 
$(xml).find('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"); 

Answer 1

您可以使用height: 'auto'或scrollOffset:0的jqGrid選項來解決這個問題。原因在於如何計算網格寬度。它並不完美，並且總是爲滾動條保留一些額外的位置。

另一種選擇，如autowidth:true或shrinkToFit:false也可用於某些情況。

Answer 2

如果你使用jqxGrid，你可以嘗試設置所有列的寬度爲百分數，所以它的總和將是100％，它幫助我擺脫了網格中的這個空白空間。