为什么表格不能拉伸到 100% 宽度答案

【问题标题】：Why does the table not stretches to 100% width为什么表格不能拉伸到 100% 宽度
【发布时间】：2011-09-17 17:19:29
【问题描述】：

上面是图片，左侧是手风琴，右侧是内容部分（表格内）我关心内容部分（右侧）为什么表格不是 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");

【问题讨论】：

标签： javascript jquery html css jqgrid

【解决方案1】：

您可以使用height: 'auto' 或scrollOffset:0 jqGrid 选项来解决问题。原因是网格宽度的计算方式。它并不完美，并且总是为滚动条保留一些额外的位置。

在某些情况下也可以使用autowidth:true 或shrinkToFit:false 等其他选项。

【讨论】：

【解决方案2】：

如果您使用 jqxGrid，您可以尝试以百分比为所有列设置宽度，因此总和将是 100%，它帮助我摆脱了网格中的这个空白空间。

【讨论】：