不必要的水平滚动条jqGrid
在我的jqGrid（使用版本4.0.0）中，我得到一个不必要的水平滚动条，但是当有一个垂直滚动条时。 此问题仅发生在Chrome和Firefox中，但不会发生在Internet Explorer中。
似乎表格宽度的计算有问题，因为水平滚动只有一个或两个像素。 我使用autowidth: true作为宽度的表属性。 大约有八列，一些具有固定宽度（非常小），另一些具有动态宽度。
完全禁用水平滚动不是解决方案，因为用户仍然可以放大某些列，然后需要水平滚动条。 但最初我希望它能够加载与表格宽度对齐的列和需要在较小屏幕上显示表格时的垂直滚动条。
下面是代码中网格属性的一个exerpt
$("#grid").jqGrid({ datatype: 'json', mtype: 'POST', colNames:loadColumns(columns)[0], colModel:loadColumns(columns)[1], height: $(window).height() - 160, rownumbers: false, pager: '#pager', rowNum:25, rowList:[25,50,100], sortname: 'invid', sortorder: 'desc', viewrecords: true, autowidth: true, beforeSelectRow: function(){ return false; }, });
您应该validation您的CSS中没有表格的某些设置。
例如，在我的建议中，我描述了ASP.NET MVC项目的标准CSS（所有版本从1.0到3.0）包括以下设置：
table { border: solid 1px #e8eef4; border-collapse: collapse; } table td { padding: 5px; border: solid 1px #e8eef4; }
通过计算最佳网格宽度不考虑该设置。 如果删除设置或添加以下附加设置
div.ui-jqgrid-view table.ui-jqgrid-btable { border-style:none; border-top-style:none; border-collapse:separate; } div.ui-jqgrid-view table.ui-jqgrid-btable td { border-left-style:none } div.ui-jqgrid-view table.ui-jqgrid-htable { border-style:none; border-top-style:none; border-collapse:separate; } div.ui-jqgrid-view table.ui-jqgrid-btable th { border-left-style:none }
水平滚动条的问题将得到解决。
如果您不使用ASP.NET MVC，您的问题可能有其他原因，但我建议您搜索table ， td或th的CSS的任何定义。
我将此代码添加到CSS文件“ui.jqgrid.css”中，并且不再显示水平滚动条：
.ui-jqgrid .ui-jqgrid-btable { table-layout: auto; }
对我来说，在网格加载后，解决方案就是这样：
$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);