Kendo 网格样式类似于 HTML table

Question

我有两个网格，一个是基本 html table，另一个是 kendo 网格。我试图让 kendo 网格看起来像 html table。有没有办法绕过 Kendo 样式并使用我设置的 table 样式？

#resultTable th {
    cursor:pointer;
}

#resultTable .table th, #resultTable .table td {
    font-size: 14px;
    font-family: 'Open Sans';
    color: #484848;
}

#resultTable td > a {
    font-size: 14px;
    font-family: 'Open Sans';
    color: #2D4B69;
}

演示 https://jsfiddle.net/tjmcdevitt/pqda6v1y/13/

Answer 1

是的，您可以使两个 table 看起来一样，但您需要进行大量 CSS 更改。将下面的示例 CSS 添加到您的代码中。这应该会告诉您从哪里开始。

.k-grid-content .k-alt {
   background-color: transparent;
}

.k-grid-content .k-alt:hover {
   background-color: transparent;
}

.k-grid td,
.k-grid-header th.k-header,
div.k-grid-header,
.k-grid-header-wrap,
.k-widget {
  border-style: none;
}

使用上面的 CSS，您的 Kendo 网格看起来就像您的第一个 table。我希望您明白您需要进行更多 CSS 更改，但这应该让您开始。

Kendo 网格样式类似于 HTML table

Kendo Grid Style like HTML table

css

bootstrap-4

kendo-ui

kendo-grid