Remove vertical lines in jqGrid

Question

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

Enter image description here

score 13 · Accepted Answer · edited May 23 '17 at 10:30

13

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:

enter image description here

edited May 23 '17 at 10:30

Community

1
1

answered Aug 03 '12 at 08:45

Oleg

220,925
34
403
798

You are the master of JQGrid. Hats off to you. – Bhavik Ambani Aug 03 '12 at 09:46
What if I dont want to display vertical line of the selected columns only ? – Bhavik Ambani Aug 07 '12 at 12:40
@BhavikAmbani: I think that you can define the new class having the corresponding CSS settings and then to use `classes` property of the [colModel](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). 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`. – Oleg Aug 07 '12 at 13:30
Thanks for the quick response but will you please give me any example where you can define css for `colModel` – Bhavik Ambani Aug 08 '12 at 04:00
@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. – Oleg Aug 08 '12 at 07:11
No problem, but when you get time please do the needful – Bhavik Ambani Aug 08 '12 at 09:14
@Oleg would something similar to this let you provide a vertical break in the grid to allow for visual separation of columns? – Mark Jan 23 '13 at 00:20
@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. – Oleg Jan 23 '13 at 00:23
@Oleg 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. – Mark Jan 23 '13 at 00:30
@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](http://api.jquery.com/css/) for example. – Oleg Jan 23 '13 at 00:51
@Oleg Please see http://stackoverflow.com/questions/14471393/how-to-insert-vertical-space-between-columns-in-jqgrid for a question with a mockup to help explain what I'm thinking of. Thank you in advance. – Mark Jan 23 '13 at 02:16

score 1 · Answer 2 · edited Jul 23 '13 at 20:45

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

edited Jul 23 '13 at 20:45

Peter Mortensen

30,738
21
105
131

answered Aug 03 '12 at 06:41

muthu

5,381
2
33
41

I just want to change for the JQgrid only – Bhavik Ambani Aug 03 '12 at 07:09
in the file jquery-ui-1.8.1.custom.css u have to add the line #records {border: 0 none !important;} – muthu Aug 03 '12 at 07:15
I tried to place `#records {border: 0px !important;}` in my custom css file, but its not working. – Bhavik Ambani Aug 03 '12 at 07:27
Shall i know your div #records has the classes like "ui-jqgrid ui-widget ui-widget-content ui-corner-all"? – muthu Aug 03 '12 at 08:08

score 1 · Answer 3 · edited Jul 23 '13 at 20:45

1

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.

edited Jul 23 '13 at 20:45

Peter Mortensen

30,738
21
105
131

answered Aug 03 '12 at 06:53

Piyush Sardana

1,748
4
19
33

my table id is `records`.Please provide for this table and where should I place the line ? – Bhavik Ambani Aug 03 '12 at 07:10
first of all, are you talking about border around you columns?? which vertical line? – Piyush Sardana Aug 03 '12 at 07:26
I tried to place `#records {border: 0px !important;}` in my custom css file, but its not working. – Bhavik Ambani Aug 03 '12 at 07:27
which vertical line are you talking about? border? – Piyush Sardana Aug 03 '12 at 07:28
i dont see any border around jqgrid. open ui.jqgrid.css and in the first two lines check – Piyush Sardana Aug 03 '12 at 07:42
.ui-jqgrid {position: relative; font-size:11px;} .ui-jqgrid .ui-jqgrid-view {position: relative;left:0px; top: 0px; padding: .0em; } no border defined. – Piyush Sardana Aug 03 '12 at 07:43

Remove vertical lines in jqGrid

3 Answers3

Linked