Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border.
Here's the simple HTML code:
<ng-template pTemplate="body" let-year let-columns="columns" let-editing="editing" let-
ri="rowIndex">
<tr [pEditableRow]="year">
<td *ngFor="let col of columns" [ngClass]="{'schedule-cell-non-zero'}"></td>
</tr>
</ng-template>
And here's the concise .scss code:
.schedule-cell-non-zero {
$color-border: $--laps-light-green;
&.inset-border {
box-shadow: inset 0 0 10px #000000;
}
display: flex;
flex-direction: column;
width: 100%;
display: flex;
border: 10px solid $color-border;
background-color: var(--primary-color);
font-weight: 300;
flex-wrap: wrap;
}
Any suggestions or tips on achieving this? Thanks!