-1

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: enter image description here

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

Vladimir99
  • 65
  • 7
  • 1
    Tables automatically distribute space evenly and efficiently. To decrease horizontal space, you can make the table narrower. Otherwise you'll just move space from one spot to another. To decrease vertical space in one-line cells, you'll need to make all other cells one line. – Sean May 23 '22 at 18:03

1 Answers1

-2

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

RagDev
  • 82
  • 1
  • 5