title: How to use colspan in Bootstrap
body: <p>I am building an app using Angular 2 and Bootstrap. My code is like below,</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
            &lt;table class="table table-striped table-bordered" style="width:100%;"&gt;
              &lt;tr&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th style="width: 50%"&gt;Away Team Statistics&lt;/th&gt;
                &lt;th style="width: 50%;"&gt;Home Team Statistics&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;th&gt;Position&lt;/th&gt;
                &lt;th&gt;Team Name&lt;/th&gt;
                &lt;th&gt;Games Played&lt;/th&gt;
                &lt;th&gt;Wins&lt;/th&gt;
                &lt;th&gt;Loses&lt;/th&gt;
                &lt;th&gt;Draw&lt;/th&gt;
                &lt;th&gt;Points&lt;/th&gt;
                &lt;th&gt;Goals&lt;/th&gt;
                &lt;th&gt;Goals Against&lt;/th&gt;
                &lt;th&gt;Goal Difference&lt;/th&gt;
                &lt;!-- Away Stats--&gt;
                &lt;th&gt;Wins&lt;/th&gt;              
                &lt;th&gt;Loses&lt;/th&gt;
                &lt;th&gt;Draw&lt;/th&gt;
                &lt;th&gt;Goals&lt;/th&gt;
                &lt;th&gt;Goals Against&lt;/th&gt;
  
                &lt;!-- Home Stats--&gt;
                &lt;th&gt;Wins&lt;/th&gt;              
                &lt;th&gt;Loses&lt;/th&gt;
                &lt;th&gt;Draw&lt;/th&gt;
                &lt;th&gt;Goals&lt;/th&gt;
                &lt;th&gt;Goals Against&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr *ngFor="let league of leagues"&gt;
                &lt;td&gt;{{league.position}}&lt;/td&gt;
                &lt;td&gt; &lt;img [src]="league.crestURI" [alt]="league.teamName" width="20px" height="20px"&gt;&lt;a href="#" (click)="getTeams(league._links.team.href, league.teamName); showPlayers == true"&gt;{{league.teamName}}&lt;/a&gt;                &lt;/td&gt;
                &lt;td&gt;{{league.playedGames}}&lt;/td&gt;
                &lt;td&gt;{{league.wins}}&lt;/td&gt;
                &lt;td&gt;{{league.losses}}&lt;/td&gt;
                &lt;td&gt;{{league.draws}}&lt;/td&gt;
                &lt;td&gt;{{league.points}}&lt;/td&gt;
                &lt;td&gt;{{league.goals}}&lt;/td&gt;
                &lt;td&gt;{{league.goalsAgainst}}&lt;/td&gt;
                &lt;td&gt;{{league.goalDifference}}&lt;/td&gt;
                &lt;!-- Away Stats--&gt;
                &lt;td&gt;{{league.away.wins}}&lt;/td&gt;
                &lt;td&gt;{{league.away.losses}}&lt;/td&gt;
                &lt;td&gt;{{league.away.draws}}&lt;/td&gt;
                &lt;td&gt;{{league.away.goals}}&lt;/td&gt;
                &lt;td&gt;{{league.away.goalsAgainst}}&lt;/td&gt;
  
                &lt;!-- Away Stats--&gt;
                &lt;td&gt;{{league.home.wins}}&lt;/td&gt;
                &lt;td&gt;{{league.home.losses}}&lt;/td&gt;
                &lt;td&gt;{{league.home.draws}}&lt;/td&gt;
                &lt;td&gt;{{league.home.goals}}&lt;/td&gt;
                &lt;td&gt;{{league.home.goalsAgainst}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Now when it loads the columns which are under the <code>Away Team Statistics</code> or <code>Home Team Statistics</code> gets outside the panel. It is due to variable number of columns may be. I have attached the screenshot for better understanding.
  <a href="https://i.stack.imgur.com/XQtfD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQtfD.png" alt="Screenshot"></a></p>
  
  <p>I want that the portion which gets outside of the <code>panel/table</code> should appear within the panel. <code>width:100%</code> or <code>colspan="5"</code> both are not working. How to fix that ?</p>