Angular custom mat-cell component is not completly filling the cells background-color and also moves the content upwards

I´m pretty new to Angular and typescript and my target is to create a checkbox inside a mat-cell that based on the childIsChecked state of the checkbox, changes the background-color of the cell.

I created a <custom-mat-cell> that is going to change the background color based on a <custom-checkbox>(normal checkbox with ability to output the checked state). The color change works perfectly fine. But the background-color seems to not completly fill the actual cell itself and when the checkbox is clicked for the first time, the content is also going to move upwards.

So basicaly my questions are:

How can i fully fill the background-color of the actual cell? And how can i prevent the content from moving around?

I have already tried giving the row a height in px and then setting the height and width to a 100% for the cell which seems to be the solution for non-Angular tables as mentioned here:

1. Make a DIV fill an entire table cell
2. How do I make a div fill an entire table cell?

My attempt

custom_mat_cell.components.css

.checked {
  background-color: green;
}

.unchecked {
  background-color: red;
}

custom_mat_cell.components.html

<mat-cell  [ngClass]="{'checked':childIsChecked, 'unchecked':!childIsChecked}">
  <custom_checkbox (changeBackground)="change_parent_background()"></custom_checkbox>
</mat-cell>

custom_mat_cell.components.ts

export class custom_mat_cell {
  childIsChecked: boolean = false

  constructor() {
  }

  change_parent_background(){
    this.childIsChecked =!this.childIsChecked
  }
}

cell/column generating code:

<ng-container *ngFor="let item of [].constructor(page_count); let i = index">
    <ng-container matColumnDef="{{i+1}}">
        <mat-header-cell class="page_cell" *matHeaderCellDef>Page {{i + 1}}</mat-header-cell>
        <custom_mat_cell *matCellDef="let element, let j = index"></custom_mat_cell>
    </ng-container>
</ng-container>

My attempt so far leads to this:

I would like to somehow fill the full range of the cell

When i click onto the checkbox, the content is moving upwards.