I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code:
<div class="panel-body">
<table class="table table-striped table-bordered" style="width:100%;">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="width: 50%">Away Team Statistics</th>
<th style="width: 50%;">Home Team Statistics</th>
</tr>
<tr>
<th>Position</th>
<th>Team Name</th>
<th>Games Played</th>
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Points</th>
<th>Goals</th>
<th>Goals Against</th>
<th>Goal Difference</th>
<!-- Away Stats-->
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Goals</th>
<th>Goals Against</th>
<!-- Home Stats-->
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Goals</th>
<th>Goals Against</th>
</tr>
<tr *ngFor="let league of leagues">
<td>{{league.position}}</td>
<td> <img [src]="league.crestURI" [alt]="league.teamName" width="20px" height="20px"><a href="#" (click)="getTeams(league._links.team.href, league.teamName); showPlayers == true">{{league.teamName}}</a> </td>
<td>{{league.playedGames}}</td>
<td>{{league.wins}}</td>
<td>{{league.losses}}</td>
<td>{{league.draws}}</td>
<td>{{league.points}}</td>
<td>{{league.goals}}</td>
<td>{{league.goalsAgainst}}</td>
<td>{{league.goalDifference}}</td>
<!-- Away Stats-->
<td>{{league.away.wins}}</td>
<td>{{league.away.losses}}</td>
<td>{{league.away.draws}}</td>
<td>{{league.away.goals}}</td>
<td>{{league.away.goalsAgainst}}</td>
<!-- Away Stats-->
<td>{{league.home.wins}}</td>
<td>{{league.home.losses}}</td>
<td>{{league.home.draws}}</td>
<td>{{league.home.goals}}</td>
<td>{{league.home.goalsAgainst}}</td>
</tr>
</table>
</div>
My issue is that when the page loads, the columns under Away Team Statistics or Home Team Statistics extend outside of the panel. This is likely due to variations in the number of columns. I've attached a screenshot for reference.
https://i.sstatic.net/XQtfD.png
I need a solution to ensure that the content overflowing from the panel/table appears within the panel. Adjusting width:100% or using colspan="5" haven't worked for me. How can I resolve this issue?