How to remove cell padding in table

Question

I'm building betting application using angular 12. I have problem utilizing space in cells. Namely there is a lot of cell padding that wastes space.

<table class="w-100 text-white">
<tbody>
    <tr *ngFor="let match of data; let index=index" app-match-row [match]="match"
        [ngClass]="{'even':index%2==0,'odd':index%2!=0}"></tr>
</tbody>

and here is app-match-row code:

<td cellpadding="0" class="align-middle different-text text-center">{{match.broj}}</td>
<td cellpadding="0" class="align-middle text-center"><img class="w-25" [src]="getSportIcon()"></td>
<td cellpadding="0" class="align-middle different-text text-center">{{getThirdColumnData()}}</td>
<td cellpadding="0" class="align-middle" [ngSwitch]="match.sh_sport.sh_sport_id">
    <app-info-football *ngSwitchCase="1" [match]="match"></app-info-football>
    <app-info-hockey *ngSwitchCase="2" [match]="match"></app-info-hockey>
    <app-info-basketball *ngSwitchCase="3" [match]="match"></app-info-basketball>
    <app-info-tennis *ngSwitchCase="4" [match]="match"></app-info-tennis>
    <app-info-handball *ngSwitchCase="5" [match]="match"></app-info-handball>
    <app-info-volleyball *ngSwitchCase="7" [match]="match"></app-info-volleyball>
</td>
<td cellpadding="0" [ngSwitch]="match.sh_sport.sh_sport_id">
    <app-first-column-football *ngSwitchCase="1" [match]="match"></app-first-column-football>
    <app-first-column-hockey *ngSwitchCase="2" [match]="match"></app-first-column-hockey>
    <app-first-column-basketball *ngSwitchCase="3" [match]="match"></app-first-column-basketball>
    <app-first-column-tennis *ngSwitchCase="4" [match]="match"></app-first-column-tennis>
    <app-first-column-handball *ngSwitchCase="5" [match]="match"></app-first-column-handball>
</td>
<td cellpadding="0" [ngSwitch]="match.sh_sport.sh_sport_id">
    <app-second-column-football *ngSwitchCase="1" [match]="match"></app-second-column-football>
    <!-- <app-second-column-hockey *ngSwitchCase="2" [match]="match"></app-second-column-hockey> -->
    <app-second-column-basketball *ngSwitchCase="3" [match]="match"></app-second-column-basketball>
    <app-seccond-column-tennis *ngSwitchCase="4" [match]="match"></app-seccond-column-tennis>
</td>
<td cellpadding="0" [ngSwitch]="match.sh_sport.sh_sport_id">
    <app-third-column-football *ngSwitchCase="1" [match]="match"></app-third-column-football>
    <app-third-column-hockey *ngSwitchCase="2" [match]="match"></app-third-column-hockey>
    <app-third-column-basketball *ngSwitchCase="3" [match]="match"></app-third-column-basketball>
    <app-third-column-tennis *ngSwitchCase="4" [match]="match"></app-third-column-tennis>
    <app-third-column-handball *ngSwitchCase="5" [match]="match"></app-third-column-handball>
</td>
<td cellpadding="0" [ngSwitch]="match.sh_sport.sh_sport_id">
    <app-fourth-column-football *ngSwitchCase="1" [match]="match"></app-fourth-column-football>
    <app-fourth-column-hockey *ngSwitchCase="2" [match]="match"></app-fourth-column-hockey>
    <app-fourth-column-tennis *ngSwitchCase="4" [match]="match"></app-fourth-column-tennis>
</td>

And here is visual representation of the problem:

The space specified with red lines is the one I want to remove.

Answer 1

border: 2px solid set-color; Replace "set-color" with what every color you use and this might help.