Understanding JQGrid column width behaviors

Try to play with 'autowidth' and 'shrinkToFit' jqGrid parameters. For example, if 'shrinkToFit' is true, columns' width will be changed as if initial widths defines percentage. Read more here.

I had the same issue. It turned out to be the existing, site default, css definitions for padding on table cells. Make sure your padding is consistent between your th and td tags. I put a div around the grid with a class of div, and added the following to my CSS:

.grid td, .grid th {    padding: 1pt 1ex !important;}

colModel: [{ name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220,                editoptions: {                    custom_element: function(value, options) { return EmailAddressCustomElement(value, options); },                    custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; }                }            },            { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170,                editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] }            },gridComplete: function() {var objRows = $("#list_accounts tr");                var objHeader = $("#list_accounts .jqgfirstrow td");                if (objRows.length > 1) {                    var objFirstRowColumns = $(objRows[1]).children("td");                    for (i = 0; i < objFirstRowColumns.length; i++) {                        $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));                    }                }            }