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.

Specifically, if the column heading title is shorter than this column width, the header shrinks down to the the size of the text in the header.

How can I make the header be exactly the same size as the column?

Question 2: I've noticed that although the documentation says that the columns "width" option is in pixels, I can see that it's actually not in pixels, but just a number relative to other widths in grid. E.g. if all fields are size 10, they all will be equal in size, but not 10 pixels in width.

Thanks in advance for clarifications, as this simple issue seems to have deeper roots than I thought.

Answer 1

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.

Answer 2

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