Remove vertical lines in jqGrid

Question

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

Spoilage

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:

Boarder

You are the master of JQGrid. Hats off to you. – Spoilage

What if I dont want to display vertical line of the selected columns only ? – Spoilage

@BhavikAmbani: I think that you can define the new class having the corresponding CSS settings and then to use classes property of the colModel. You should just be carefully in definition of the CSS style which uses the new class, so that the new CSS rule will have higher priority as the old default rule for border-right-color. – Boarder

Thanks for the quick response but will you please give me any example where you can define css for colModel – Spoilage

@BhavikAmbani: Sorry, but I am now in business trip. I am at another country at one customer. So I can't create any examples for you. – Boarder

No problem, but when you get time please do the needful – Spoilage

@Boarder would something similar to this let you provide a vertical break in the grid to allow for visual separation of columns? – That

@Mark: If I understand you correctly one need just use not all CSS which I described in my answer. If you don't add border-right-color: transparent; part then the vertical lines will be visible. – Boarder

@Boarder Sorry if I was not clear. What I am investigating is in a 10 column grid, would it be possible in a reasonable manner to have a complete vertical break in, as an example, the grid leaving a vertical divide between the 8th and 9th column. – That

@Mark: You can set border-right-color: transparent; or border-bottom-color: transparent; everywhere where you don't need have vertical or horizontal lines. You can assign CSS style with respect of jQuery.css for example. – Boarder

@Boarder Please see #14471893 for a question with a mockup to help explain what I'm thinking of. Thank you in advance. – That

Answer 2

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

Argyres

I just want to change for the JQgrid only – Spoilage

in the file jquery-ui-1.8.1.custom.css u have to add the line #records {border: 0 none !important;} – Argyres

I tried to place #records {border: 0px !important;} in my custom css file, but its not working. – Spoilage

Shall i know your div #records has the classes like "ui-jqgrid ui-widget ui-widget-content ui-corner-all"? – Argyres

Answer 3

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.

Cung

my table id is records.Please provide for this table and where should I place the line ? – Spoilage

first of all, are you talking about border around you columns?? which vertical line? – Cung

I tried to place #records {border: 0px !important;} in my custom css file, but its not working. – Spoilage

which vertical line are you talking about? border? – Cung

i dont see any border around jqgrid. open ui.jqgrid.css and in the first two lines check – Cung

.ui-jqgrid {position: relative; font-size:11px;} .ui-jqgrid .ui-jqgrid-view {position: relative;left:0px; top: 0px; padding: .0em; } no border defined. – Cung