how to remove horizontal lines in jqgrid Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of how to remove horizontal lines in jqgrid without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

Answer

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.

We are here to answer your question about how to remove horizontal lines in jqgrid - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji