Remove vertical lines in jqGrid

Question

I want to remove the lines displayed in the image of jqGrid. How can I remove that?

Answer 1

jqGrid builds some additional divs over the main grid table. The outer div has the class ui-jqgrid. So if you need to remove right and left border existing over the whole grid you can use the following CSS:

.ui-jqgrid { border-right-width: 0px; border-left-width: 0px; }

If you need to remove all grid's borders you can use

.ui-jqgrid { border-width: 0px; }

If you want additionally remove vertical border between the cells in the grid you can use

.ui-jqgrid tr.ui-row-ltr td { border-right-color: transparent; }

To remove horizontal border between the rows you can use

.ui-jqgrid tr.ui-row-ltr td { border-bottom-color: transparent; }

To remove vertical borders between the column headers you can use

th.ui-th-column { border-right-color: transparent !important }

or alternatively (without the usage of !important)

.ui-jqgrid-labels .ui-th-column { border-right-color: transparent }

(See the old answer)

So you can choose the styles which you need depend on your exact requirements. The demo demonstrate the results on applying of all above CSS styles: