jquery - 删除jqGrid中的垂直线

Question

我想删除jqGrid图像中显示的线条。我怎样才能删除它？

Answer 1

jqGrid 在主网格表上构建了一些额外的 div。外部 div 具有 class 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 样式的结果：

Answer 2

如果要通过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;
    }

Answer 3

您可以在您的内联 CSS 中执行以下操作，而不是更改文件中的CSS ：custom.css

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

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