删除jqGrid中的垂直线

我想删除jqGrid图像中显示的行。 我怎么能删除它?

在此输入图像描述

jqGrid在主网格表上构建了一些额外的div。 外部div具有类ui-jqgrid 。 因此,如果您需要删除整个网格中存在的左右边框,您可以使用以下CSS:

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

如果您需要删除所有网格的边框,您可以使用

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

如果您想要另外删除网格中单元格之间的垂直边框,您可以使用

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

要删除可以使用的行之间的水平边框

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

要删除可以使用的列标题之间的垂直边框

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

或者(不使用!important

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

(见旧答案 )

因此,您可以根据具体要求选择所需的样式。 该演示演示了应用上述所有CSS样式的结果:

在此处输入图像描述

如果要通过CSS删除边框,则意味着您必须将边框更改为none ,如下所示。

在CSS文件中,jquery-ui-1.8.1.custom.css(第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; } 

您可以custom.css联CSS中执行以下操作,而不是在custom.css文件中更改CSS:

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

不要忘记!important ,它将覆盖在自定义CSS文件中为您的表定义的CSS。