Remove vertical lines in jqGrid

by

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

More Related Contents:

  1. How to filter the jqGrid data NOT using the built in search/filter box
  2. Why is my jQuery :not() selector not working in CSS?
  3. iframe to Only Show a Certain Part of the Page
  4. $(window).width() not the same as media query
  5. Get element -moz-transform:rotate value in jQuery
  6. Play/pause HTML 5 video using JQuery
  7. How to automatically change the text size inside a div?
  8. jquery IE Fadein and Fadeout Opacity
  9. Activate CSS3 animation when the content scrolls into view
  10. jQuery toggle CSS?
  11. jQuery CSS – Write into the -tag
  12. jqgrid showLink
  13. jQuery: height()/width() and “display:none”
  14. Resize SubGrid Columns on resizing main grid
  15. How to find the highest z-index using jQuery
  16. Selecting only first-level elements in jquery
  17. How to make Bootstrap carousel slider use mobile left/right swipe
  18. How to expand ‘select’ option width after the user wants to select an option
  19. How do you select elements based on their style?
  20. How to change column name in column chooser pop up in jqgrid?
  21. is it possible to have html inside of a jqgrid treegrid cell
  22. Why is the window.width smaller than the viewport width set in media queries
  23. Get *all* CSS attributes with jQuery
  24. jQuery CSS() for dynamically created elements
  25. Set background colour of select to selected option in JQuery
  26. Change the body background image with fade effect in jquery
  27. Send expanded TreeGrid Nodes in cookie
  28. Fit text perfectly inside a div (height and width) without affecting the size of the div
  29. CSS Transition Not Firing
  30. jqGrid with automatic height; but has a max height & scrollbars

Leave a Comment