jqgrid table comlumns crowded - jqgrid

Question

Please see the image.
Not sure why the table doesn't stretch out. I want it stretch out from left to right.
The script:
<script type="text/javascript">
var jqgrid_data = [
{
id: "1",
name: "Test 1",
note: "Note 1",
amount: "150.00",
tax: "15.00",
total: "210.00"
}, {
id: "2",
name: "Test 2",
note: "Note 2",
amount: "220.00",
tax: "22.00",
total: "320.00"
}, {
id: "3",
name: "Test 3",
note: "Note 3",
amount: "40.00",
tax: "4.00",
total: "430.00"
}, {
id: "4",
name: "Test 4",
note: "Note 4",
amount: "510.00",
tax: "51.00",
total: "210.00"
}, {
id: "5",
name: "Test 5",
note: "Note 5",
amount: "210.00",
tax: "21.00",
total: "320.00"
}, {
id: "6",
name: "Test 6",
note: "Note 6",
amount: "70.00",
tax: "7.00",
total: "430.00"
}, {
id: "7",
name: "Test 7",
note: "Note 7",
amount: "80.00",
tax: "10.00",
total: "210.00"
}, {
id: "8",
name: "Test 8",
note: "Note 8",
amount: "300.00",
tax: "10.00",
total: "320.00"
}, {
id: "9",
name: "Test 9",
note: "Note 9",
amount: "90.00",
tax: "10.00",
total: "430.00"
}, {
id: "10",
name: "Test 10",
note: "Note 10",
amount: "200.00",
tax: "20.00",
total: "210.00"
}, {
id: "11",
name: "Test 11",
note: "Note 11",
amount: "77.00",
tax: "9.00",
total: "320.00"
}, {
id: "12",
name: "Test 12",
note: "Note 12",
amount: "56.00",
tax: "8.00",
total: "430.00"
}, {
id: "13",
name: "Test 13",
note: "Note 13",
amount: "554.00",
tax: "10.00",
total: "210.00"
}, {
id: "14",
name: "Test 14",
note: "Note 14",
amount: "265.00",
tax: "2.00",
total: "320.00"
}, {
id: "15",
name: "Test 15",
note: "Note 15",
amount: "765.00",
tax: "3.00",
total: "430.00"
}, {
id: "16",
name: "Test 16",
note: "Note 16",
amount: "89.00",
tax: "1.00",
total: "210.00"
}, {
id: "17",
name: "Test 17",
note: "Note 17",
amount: "99.00",
tax: "2.00",
total: "320.00"
}, {
id: "18",
name: "Test 18",
note: "Note 18",
amount: "49.00",
tax: "3.00",
total: "430.00"
}
];
</script>
<script>
$(document).ready(
function () {
jQuery("#jqgrid").jqGrid({
url: API_URL,
data: jqgrid_data,
datatype: "local",
height: '350',
colNames: ['Actions', 'Inv No', 'Client', 'Amount', 'Tax', 'Total'],
colModel: [
{ name: 'act', index: 'act', width:80, sortable: false },
{ name: 'id', index: 'id', width: 80 },
{ name: 'name', index: 'name', width: 80, editable: true },
{ name: 'amount', index: 'amount', align: "right", width: 80, editable: true },
{ name: 'tax', index: 'tax', align: "right", width: 80, editable: true },
{ name: 'total', index: 'total', align: "right", width: 80, editable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: function () {
var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid").jqGrid('setRowData', ids[i], { act: be + se + ca });
}
},
editurl: "dummy.html",
caption: "Vendor Managerment",
multiselect: true,
autowidth: true
});
});
</script>
<table id="jqgrid"></table>
<div id="pager_jqgrid"></div>
It seems that the width of the table is fixed.

Answer 1

I had the code which is similar with:
gridComplete: function() {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick='deleteRow('" + cl + "' );' />";
jQuery("#list").jqGrid('setRowData', ids[i], { Delete: de });
}
}
After I removed it, it stretches out.