How to use colspan in Bootstrap - css

Question

I am building an app using Angular 2 and Bootstrap. My code is like below,
<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">{{league.teamName}} </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>
Now when it loads the columns which are under the Away Team Statistics or Home Team Statistics gets outside the panel. It is due to variable number of columns may be. I have attached the screenshot for better understanding.
I want that the portion which gets outside of the panel/table should appear within the panel. width:100% or colspan="5" both are not working. How to fix that ?

Answer 1

The inline style on last two columns of table is wrong.
style="width: 50%"
Either add a bootstrap provided class table-responsive to your table or set a width to your table using:
width: 100%;

Answer 2

If you want to fill your div.panel-body with 12 column table you must add overflow-x: scrollbar to div or just format your table from the start with 5 columns. The table with 12 columns can have weird look. Also, you can use <tbody> and <thead> tags, they are very useful for understanding the code.