Controlling JQGrid horizontal scroll bar in ASP.NET MVC Application

Question

Hi, I have come across a problem with my JQGrids horizontal scroll bar in an ASP.NET MVC application. The issue is, i have given a fixed width to the grid, and expect that horizontal scroll bar should appear dynamically when i resize my columns; but it does not, instead, the grid spills out of the page. I have tried to add a div element with overflow=scroll around the table which holds the grid, even that did not solve the issue.

Am i doing something wrong? I tried to dig through the existing threads, but could not find similar ones.

I have attached the HTML and Script code as a reference. Any help is appreciated.

<div id="div1" class="clsInner">
    <table>
        <tr>
            <td colspan="2" class="clsHeading">
                Existing Proposals
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table id="list" cellpadding="0" cellspacing="0" class="scroll">
                </table>
                <%-- <div id="pager" class="scroll" style="text-align: center;">
                </div>--%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
            </td>
        </tr>
    </table>
</div>

and

 jQuery("#list").jqGrid({
     url: '<%= Url.Content("~/OrganizationAccount/AccountHomeGridData") %>/',
     datatype: 'json',
     mtype: 'GET',
     colNames: [
         'Id', 'Proposal Name', 'Proposal #', "", "", 'Organization', 'Category',
         'Sub Category', 'Status', 'Updated On', 'Updated By', 'Review', 'Edit'],
     colModel: [
         { name: 'ProposalId', index: 'ProposalId', width: 1, align: 'left' },
         { name: 'ProposalName', index: 'ProposalName', width: 180,  align: 'left' },
         { name: 'ProposalNumber', index: 'ProposalNumber', width: 72,
           align: 'left', resizable: false },
         { name: 'ProposalNumber1', index: 'ProposalNumber1', width: 1,
           align: 'left' },
         { name: 'ProposalNumber2', index: 'ProposalNumber2', width: 90,
           align: 'left' },
         { name: 'Organization', index: 'Organization', width: 150, align: 'left' },
         { name: 'Category', index: 'Category', width: 85,
           align: 'left', resizable: false },
         { name: 'SubCategory', index: 'SubCategory', width: 90, align: 'left' },
         { name: 'Status', index: 'Status', width: 100, align: 'left' },
         { name: 'LastUpdated', index: 'LastUpdated', width: 90,
           align: 'left', resizable: false },
         { name: 'UpdatedBy', index: 'UpdatedBy', width: 100, align: 'left' },
         { name: 'Review', index: 'Review', width: 50,
           align: 'center', sortable: false, resizable: false },
         { name: 'Edit', index: 'Edit', width: 40,
           align: 'center', sortable: false, resizable: false}],
     //pager: jQuery("#pager"),
     rowNum: 10,
     rowList: [10, 20, 30],
     sortname: 'ProposalName',
     sortorder: "asc",
     viewrecords: true,
     pginput: false,
     pgbuttons: false,
     rowList: false,
     imgpath: '<%= Url.Content("~/scripts/themes/sand/images")%>/',
     caption: 'Proposal Details',
     width: '980'
     //autowidth: true,
     //forceFit: false
 });

 jQuery("#list").hideCol("ProposalId");
 jQuery("#list").hideCol("ProposalNumber1");
 jQuery("#list").hideCol("ProposalNumber2");