Understanding JQGrid column width behaviors

Question

I have a tree grid with many columns, all with specified width. And boy, it looks terrible since headers are out of sync with columns below, even if I have short data in them.

Answer 1

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"));
                    }
                }
            }