jqGrid header and body/data column width not equal

Question

I have issues with jqGrid column width.

Few options that I have set for my grid :
autowidth: true,
shrinkToFit: true,
width : 100%,

And the change that I have done in ui.jqGrid.css is as follows:

.ui-jqgrid .ui-jqgrid-htable {
   table-layout:auto;
   margin:0em;
} //for header - auto table layout.

Similarly I have done for body and footer.

Hope this helps. Please let me know in case there requires any other information.

Note: I am using the latest jqGrid. I referred to a similar question jqGrid header width different from data column width, but it was not useful in my case.

j j j j · Accepted Answer · 2012-11-06T06:20:56

I have figured out the reason for the problem.

I had added a CSS previously for table ( meant for my custom table) and that has overridden the jQgrid CSS causing the issue.

    table td {
         padding: 5px;
         border: solid 1px #e8eef4;
    }

    table th {
        padding: 6px 5px;
        text-align: left;
    }

So I added the specific class the above one, so that it doesn't override jqGrid. Sorry that I did not notice and figure it out earlier. And also the need for change in table-layout property in jqgrid-css was not required. My motive being shrinktofit and autowidth.

jqGrid header and body/data column width not equal

1 Answers