Giving border color between last child and next immediate element in data table

Question

I am working on angular app. I am using primeng data table. code is as follows :

<p-toast></p-toast>

<h5>Checkbox Selection</h5>
<p-treeTable
  [value]="files5"
  [columns]="cols"
  [(selection)]="selectedNodes3"
  (onNodeSelect)="nodeSelect($event)"
  (onNodeUnselect)="nodeUnselect($event)"
  selectionMode="single"
>
  >
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header }}
      </th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowNode
    let-rowData="rowData"
    let-columns="columns"
    let-si="rowIndex"
    let-line
  >
    <tr
      (click)="nodeSelect(rowNode)"
      [ngClass]="{
        'bottom-border-class':
          rowNode.level === 0 && rowNode.node.expanded !== true
      }"
    >
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler
          [rowNode]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableToggler>
        <p-treeTableCheckbox
          [value]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableCheckbox>
        {{ rowData[col.field] }}
        {{ si }}
        {{ line }}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Stackblitz:

https://stackblitz.com/edit/primeng-treetableselection-demo-ci31c1?file=src%2Fapp%2Fapp.component.html

Code is working fine. Problem is when I expand a element, border bottom of red color of last child and immediate next element is is lost. For example in above stackblitz, if I expand first element "Applications", then I want red color border bottom between last child i.e "settings.app" and next element i.e "cloud" and same for all the elements. How can I give red color border bottom between last child and immediate next element.

Answer 1

Clicking on Applications i have access - angular, editor.app and setting.app, right!? But the options below Applications isn't child is Sibling!(check devTools)

You can set the new options to be child of Applications or you can add a class just to the new options and set on css the border-bottom to the last child.

css example

.child-options:last-child {
     border-bottom: border-bottom: 3px solid red;
}