不必要的水平滚动条jqGrid

Question

在我的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;
    },
});

Answer 1

您应该验证您的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,您的问题可能有其他原因,但我建议您搜索CSS的任何定义table,td或th.

Answer 2

我将此代码添加到CSS文件"ui.jqgrid.css"中,并且不再显示水平滚动条:

.ui-jqgrid .ui-jqgrid-btable
{
    table-layout: auto;
}