Понимание поведения ширины столбца JQGrid

Попробуйте поиграть с параметрами jqGrid 'autowidth' и 'shrinkToFit'. Например, если shrinkToFit истинно, ширина столбцов будет изменена, как если бы исходная ширина определяла процент. Подробнее читайте здесь.

Я была такая же проблема. Оказалось, что это существующие определения CSS по умолчанию для заполнения ячеек таблицы. Убедитесь, что ваш отступ между тегами th и td согласован. Я поместил div вокруг сетки с классом div и добавил в свой CSS следующее:

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

У меня была такая же проблема. Я решил эту проблему, добавив 4 строки кода в GridComplete. эти 4 строки изменят стиль td области содержимого [достаточно модификации стиля td первой строки]. Это проблема в jqgid. Что на самом деле устанавливает td внутри '', но этот стиль не отражается в td области содержимого. При разработке jqgrid они предполагали, что вся ширина столбцов будет зависеть от изменения ширины tds одной строки, но они изменились только для '', что является постоянной проблемой здесь.

Установите ширину столбцов в ColModel:

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:

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

Надеюсь, приведенный выше код поможет вам в решении проблемы.

Установите ширину каждого столбца в процентах с помощью CSS

Добавьте классы css, как показано ниже

table.ui-jqgrid-htable thead{display:table-header-group}
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}

Теперь установите ширину каждого столбца и

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}