不必要的水平滚动条 jqGrid

Question

在我的 jqGrid（使用 4.0.0 版）中，我得到了一个不必要的水平滚动条，但是当还有一个垂直滚动条时。此问题仅在 Chrome 和 Firefox 中出现，在 Internet Explorer 中不会出现。

好像表格宽度的计算有问题，因为横向滚动只有一两个像素。我使用autowidth: true 作为宽度的表格属性。大约有八列，一些具有固定宽度（非常小），另一些具有动态宽度。

完全禁用水平滚动不是解决方案，因为用户仍然可以放大某些列，然后需要水平滚动条。但最初我希望它加载与表格宽度对齐的列，并在需要在较小的屏幕上显示表格时使用垂直滚动条。

以下是代码中网格属性的摘录

    $("#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 中没有表格的某些设置。

例如在我的建议here 中，我描述了 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;
}

Answer 3

对我来说，加载网格后的解决方案是这样的：

$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);