How to insert a border into a table cell such that it doesn't mess up the table

Question

I have an ng table where I wish to dynamically apply a border to the cells.

I'm able to do this. However, it gets the table cells out of alignment, especically if I'm trying to do a thick border...

I've messed around with the width of the cells and such but what I really want it to do is just keep the cells the exact same size they already are but with a border strictly on the inside of the cells.

Here is my html code. Not too much to it...

<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 is my .scss code. Again not much to it..

.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? Thanks much

Answer 1

Try using the box-sizing CSS property
box-sizing: border-box; on the schedule-cell-non-zero class name.