CODEWITHSUNDEEP
javascriptcssjqgridgridborder
sarsnake
sarsnake

Reputation: 27703

how to remove horizontal lines in jqgrid

How do I achieve doing that?

html

<table id="myGrid"><table>


//in my js I make it into a jqgrid

//css
.ui-jqgrid tr.ui-row-ltr td { border: none;}
.ui-jqgrid tr.ui-row-ltr td { border-collapse:collapse}

The vertical lines are gone but the horizontal ones remain.

Please do not offer me to look at a different answer as the suggestions did not work which is why I am posting - I need the lines removed.

Upvotes: 2

Views: 1073

Answers (1)

Oleg
Oleg

Reputation: 221997

My old answer should provide the main idea of "removing" the vertical and horizontal borders of grid cells. The solution can depends on which jqGrid fork ((free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7)) and in which version you use jqGrid.

I tested just now with free jqGrid 4.9.2 and the the following CSS rules inserted after ui.jqgrid.css "removes" successfully horizontal borders

.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.ui-subgrid > td {
    border-bottom-color: transparent;
}

and the CSS rules

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

"remove" vertical borders of cells of the grid.

Upvotes: 2

Related Questions