Javascript 如何在不需要时去掉水平滚动条

我有两列jqGrid，其中一列是隐藏的。出于某种原因，FireFox中会显示一个水平滚动条，如下所示：

一旦我将第二列设置为显示滚动条，滚动条就会消失，如下所示：

在IE中，它以相同的方式显示，接受向第一个图像添加垂直滚动。我想这和单杠有关。如果有人知道如何在不将网格高度设置为“自动”以外的任何设置的情况下去除水平条，请让我知道

我的jqGrid安装脚本：

grid.jqGrid({
    url: "/Availability/GetData",
    colNames: ['row_id', 'Availability'],
    colModel: [
        { name: 'row_id', index: 'row_id', width: 20, hidden: false, search: false, editable: true, editoptions: { readonly: true, size: 10 }, formoptions: { rowpos: 1, label: "Id", elmprefix: "(*)"} },
        { name: 'AVAILABILITY', index: 'AVAILABILITY', width: 75, sortable: true, hidden: false, editable: true, editoptions: { size: 20, maxlength: 20 }, formoptions: { rowpos: 2, label: "Availability", elmprefix: "<span class='jqgridrequired'>*</span>" }, editrules: { required: true} }
        ],
    pager: pager,
    datatype: 'json',
    imgpath: '/Scripts/jqGrid/themes/redmond/images',
    jsonReader: {
        root: "Rows",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        userdata: "UserData",
        id: "row_id"
    },
    loadtext: 'Loading Data...',
    loadui: "enable",
    mtype: 'GET',
    rowNum: 10,
    rowList: [10, 20, 50],
    viewrecords: true,
    multiselect: false,
    sortorder: "asc",
    height: 'auto',
    autowidth: true,
    sortname: 'AVAILABILITY',
    caption: 'Existing Availabilities'
}).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false },
           { height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterEdit: true, url: "/Availability/Edit", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for edit
           {height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterAdd: true, url: "/Availability/Create", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for add
           {reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, url: "/Availability/Delete" }, // delete instead that del:false we need this
           {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
           {} //{height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
 );
enter code here

grid.jqGrid({
url:“/Availability/GetData”，
colNames:['row_id'，'Availability']，
colModel：[
{name:'row_id'，index:'row_id'，width:20，hidden:false，search:false，edit:true，editoptions:{readonly:true，size:10}，formoptions:{rowpos:1，label:'id'，elmprefix:（*）“}，
{name:'AVAILABILITY'，index:'AVAILABILITY'，width:75，sortable:true，hidden:false，editoptions:{size:20，maxlength:20}，formoptions:{rowpos:2，label:'AVAILABILITY'，elmprefix:*“}，editrules:{required:true}
],
寻呼机：寻呼机，
数据类型：“json”，
imgpath:“/Scripts/jqGrid/themes/redmond/images”，
jsonReader：{
根：“行”，
第页：“第页”，
总计：“总计”，
记录：“记录”，
重复项：false，
用户数据：“用户数据”，
id:“行id”
},
loadtext:“正在加载数据…”，
loadui：“启用”，
mtype:'获取'，
rowNum:10，
行列表：[10,20,50]，
viewrecords：是的，
多选：错，
分拣员：“asc”，
高度：“自动”，
自动宽度：正确，
sortname:“可用性”，
标题：“现有可用性”
}).navGrid（“#pager”，{view:false，del:true，add:true，edit:true，search:false}，
{height:150，reloadAfterSubmit:false，jqModal:true，closeOnEscape:true，bottominfo:“标记为（*）的字段是必需的”，closeAfterEdit:true，url:“/Availability/Edit”，savekey:[true，13]，navkey:[true，38，40]，afterSubmit:processAddEdit}，//编辑的默认设置
{height:150，reloadAfterSubmit:false，jqModal:true，closeOnEscape:true，bottominfo:“标记为（*）的字段是必需的”，closeAfterAdd:true，url:“/Availability/Create”，savekey:[true，13]，navkey:[true，38，40]，afterSubmit:processAddEdit}，//添加的默认设置
{reloadAfterSubmit:false，jqModal:true，closeOnEscape:true，url:“/Availability/Delete”}，//删除del:false，我们需要这个
{closeOnEscape:true，multipleSearch:true，closeAfterSearch:true}，//搜索选项
{}/{height:150，jqModal:false，closeOnEscape:true}/*视图参数*/
);
在这里输入代码

---

正如您所见，我使用的高度是：“auto”，因此当用户选择更高的页面计数时，它将向下延伸。在显示多个列的其他网格上，我没有这个问题。只显示了一列的网格。

我试图用和示例重现您的问题，但没有您描述的效果。将正确计算网格的宽度

---

问题可能出在您使用的其他CSS样式中。您可以使用测试JSON数据发布完整的代码，这些数据再现了问题。

我终于找到了完美的解决方案。我还试图克服水平滚动条问题。在Jquery中尝试了很多次。但问题在于CSS。 在ui-jqgrid.css中，表格布局是固定的。让它自动，它会工作得很好。 我只是复制了同一个类，即

.ui-jqgrid .ui-jqgrid-btable
{
  table-layout:auto;
}  /* THIS CODE WILL WORK PERFECTLY BEFORE IT WAS IN 'FIXED' VALUE IN THEIR CSS */

---

看起来这个问题可能又出现了。Chrome在7月31日发布了v21，我突然开始看到水平滚动条。我使用的是jqGrid v4.4.0，搜索“webkit”的非最小化代码没有得到任何结果，因此我无法尝试Oleg的修复

经过一点尝试和错误，和user1479471的解决方案的组合对我起了作用：

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

div.ui-jqgrid-view table.ui-jqgrid-htable {
  table-layout:auto;
}

添加此样式

  <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
  </style>

.ui jqgrid bdiv{
溢出-x：隐藏！重要；
}

你完全正确。我有一个表格和td的风格，它设置了一个边框以及边框折叠。我应该看到的。谢谢你抽出时间@Sarath：答案现在已经很古老了，是关于Firefox中的水平条的。在我的测试中，Firefox13.0.1和IE9中的演示没有水平条。如果您使用Google Chrome，您必须将jqGrid 3.8.2的使用更新为当前的4.4.0，因为存在上述问题。例如，与第一个相同，但使用jqGrid 4.4.0。Google Chrome 20中现在没有水平条了。@Oleg谢谢你为我指明了正确的方向。我的问题解决了。