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

If you want to remove the border through CSS it means you have to change the border as none like in the following.

In the CSS file, jquery-ui-1.8.1.custom.css (line 53):

  #divid  .ui-widget-content {
        background: url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") repeat-x scroll 50% bottom #FCFDFD;
        border: 0 none;
        color: #222222;
    }

Answer 2

Rather than changing your CSS in custom.css file, you can do something like this in your inline CSS:

.ui-widget-content table#YourTableId { border: 0px !important; }

Don't forget !important, it will override the CSS defined for your table in a custom CSS file.

Answer 3

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: