Eliminar líneas verticales en jqGrid

Question

Quiero eliminar las líneas que se muestran en la imagen de jqGrid. ¿Cómo puedo eliminar eso?

Answer 1

jqGrid construye algunos divs adicionales sobre la tabla de la grilla principal. El div externo tiene la clase ui-jqgrid. Así que si usted necesita para eliminar el borde derecho e izquierdo existente en toda la red puede utilizar el siguiente CSS:

.ui-jqgrid { border-right-width: 0px; border-left-width: 0px; } 

Si necesita quitar los bordes todo de la red puede utilizar

.ui-jqgrid { border-width: 0px; } 

Si desea además, eliminar el borde vertical entre las celdas de la cuadrícula se puede utilizar

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

Para quitar borde horizontal entre las filas puede utilizar

.ui-jqgrid tr.ui-row-ltr td { border-bottom-color: transparent; } 

Para quitar los bordes verticales entre los encabezados de columna puede utilizar

th.ui-th-column { border-right-color: transparent !important } 

o alternativamente (sin el uso de !important)

.ui-jqgrid-labels .ui-th-column { border-right-color: transparent } 

(Ver the old answer)

Por lo que puede elegir los estilos que necesita depender de sus requisitos exactos. The demo demostrar los resultados en la aplicación de todos por encima de estilos CSS:

Answer 2

Si desea eliminar la frontera a través CSS que significa que tiene que cambiar la frontera como none como en la siguiente.

En el archivo CSS, jQuery-UI-1.8.1.custom.css (línea 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; 
    } 

Answer 3

En lugar de cambiar su CSS en custom.css archivo, se puede hacer algo como esto en su línea CSS:

.ui-widget-content table#YourTableId { border: 0px !important; } 

no se olvide !important, se anulará el CSS definida por su mesa en un archivo CSS personalizado.