为什么表格没有拉伸到 100% 宽度
上面是图像，其中左侧是手风琴，右侧是内容部分（在表格内） ）我担心内容部分（右侧）为什么表格不是 100% 宽度？而其顶部的标题则扩展到整个页面宽度。下面给出的是我的内容代码。
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>System>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");
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).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>System>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");
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用
height: 'auto'或 scrollOffset:0 jqGrid 选项修复了该问题。原因是网格宽度的计算方式。它并不完美，总是为滚动条保留一些额外的位置。在某些情况下也可以使用其他选项，例如
autowidth:true或shrinkToFit:false。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:trueorshrinkToFit:falsecan be also used in some situations.如果你使用jqxGrid，你可以尝试以百分比设置所有列的宽度，所以它的总和将是100%，它帮助我摆脱了网格中的空白区域。
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.