如何应用 CSS，仅在 kendo Angular 的子网格中

Question

Image shows how grid looks like

我已经使用 kendo 实现了 angular UI。它包含一个嵌套的网格。我只想在子网格中应用 css。但是当我要写 css 时，它也适用于父网格。怎么做。

像这样的网格结构：

Row 1
   row 1
   row 2
Row 2
    row 1
Row 3
    row 1

我试过了

::ng-deep .k-grid td {
    padding: 8px !important;
}

HTML:

<div class="monitorGrid container-fluid pt-2 pr-0 pl-0">
  <kendo-grid [data]="gridData" [resizable]="true">
    <kendo-grid-column [width]="140" field="shipmentAutoId" title="Shipment Auto Id"></kendo-grid-column>
    <kendo-grid-column field="shipmentName" [width]="550" title="Shipment Name"></kendo-grid-column>
    <kendo-grid-column field="shipmentStatusId" hidden="hidden" title="Shipment Status Id"></kendo-grid-column>
    <kendo-grid-column field="statusName" [width]="140" title="Shipment Status"></kendo-grid-column>
    <kendo-grid-column field="pdfCount" [width]="90" title="PDF count"></kendo-grid-column>
    <kendo-grid-column field="downloadDate" [width]="140" title="Download Date"></kendo-grid-column>
    <kendo-grid-column field="deliveryDate" [width]="180" title="Shipment Delivery Date"></kendo-grid-column>
    <ng-template let-dataItem kendoGridDetailTemplate>

      <kendo-grid class="childGrid" [data]="dataItem.processing" [resizable]="true">
        <kendo-grid-column field="processingId" [width]="110" title="Processing Id">
        </kendo-grid-column>
        <kendo-grid-column field="documentName" [width]="520" title="Document Name">
        </kendo-grid-column>
        <kendo-grid-column field="insuranceCoId" hidden="hidden" title="Insurance Co Id">
        </kendo-grid-column>
        <kendo-grid-column field="insuranceCoName" [width]="145" title="Insurance Co Name">
        </kendo-grid-column>
        <kendo-grid-column field="templateId" hidden="hidden" title="Template Id">
        </kendo-grid-column>
        <kendo-grid-column field="templateName" title="Template Name"></kendo-grid-column>
        <kendo-grid-column field="sparteId" hidden="hidden" title="Sparte Id">
        </kendo-grid-column>
        <kendo-grid-column field="sparte" [width]="70" title="Sparte"></kendo-grid-column>
        <kendo-grid-column field="gevoId" hidden="hidden" title="Gevo Id"></kendo-grid-column>
        <kendo-grid-column field="gevo" [width]="90" title="Gevo"></kendo-grid-column>
        <kendo-grid-column field="totalPages" [width]="100" title="Total Pages">
        </kendo-grid-column>
      </kendo-grid>

    </ng-template>
  </kendo-grid>

</div>

预期结果：颜色和填充宽度等样式仅应用于子网格。

实际结果：Css 全部应用于网格

Answer 1

如果您制定一个针对您的子网格的 CSS 规则会怎样：

::ng-deep .childGrid td {
    padding: 8px !important;
}

如何应用 CSS，仅在 kendo Angular 的子网格中

How to apply CSS, only in child grid in kendo Angular

css

kendo-grid

angular