仅在分层Kendo Ui Grid的列标题中显示垂直网格线

时间:2016-09-16 08:35:42

标签: javascript jquery css kendo-grid

enter image description here

我的要求如图所示。每个分层网格都包含实际数据及其标题" Nancy"对应于正在显示其数据的客户端的名称。主标题还显示与每个分层网格中显示的相同的列名称。到目前为止我已经完成了这个,但问题是我无法仅从顶部主标题中删除垂直网格线。它仍然如下图所示:

enter image description here

我想删除客户名称所在列中的网格线。如果我使用以下代码,那么它也会从内部网格中删除网格线。

.k-grid td {border-width: 0;}

我想仅在每个出现客户名称的分层网格的标题中隐藏网格线(" Nancy")

使用上述风格时,它已经开始: enter image description here

它已从每个网格中删除了网格线,这不是我想要的。

2 个答案:

答案 0 :(得分:1)

尝试使用以下css

.k-grid tr.k-master-row td {border-width: 0;}

答案 1 :(得分:1)

可以删除主行边框,如 HemantD 所示,但建议保留单元格'标题和数据区域中的垂直边框宽度一致,否则您可能会在Internet Explorer中观察到未对齐。这同样适用于侧细胞填充。这就是我建议仅更改单元格边框颜色的原因:

.k-grid .k-master-row > td {
    border-color: transparent;
}

你甚至可以只为左边界做到这一点:

.k-grid .k-master-row > td {
    border-left-color: transparent;
}