Wie man Colspan in Bootstrap verwendet

Question

Ich baue eine App mit Angular 2 und Bootstrap. Mein Code ist unten wie

<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> 

Nun, wenn es um die Spalten lädt die die unter sind Away Team Statistics oder Home Team Statistics außerhalb der Platte bekommt. Es ist aufgrund der variablen Anzahl der Spalten möglicherweise. Ich habe den Screenshot zum besseren Verständnis angehängt.

Ich möchte, dass der Teil, der außerhalb der panel/table außerhalb des Panels erscheint. width:100% oder colspan="5" beide funktionieren nicht. Wie behebt man das?

Answer 1

Der Inline-Stil in den letzten beiden Spalten der Tabelle ist falsch.

style="width: 50%" 

Entweder eine Bootstrap bereitgestellt Klasse table-responsive zu Ihrer Tabelle hinzufügen oder eine Breite an den Tisch gesetzt werden:

width: 100%; 

Answer 2

Wenn Sie Ihre div.panel-body mit 12 einspaltige Tabelle füllen wollen, müssen Sie overflow-x: scrollbar zu div hinzufügen oder formatieren Sie Ihre Tabelle einfach von Anfang an mit 5 Spalten. Die Tabelle mit 12 Spalten kann weird look haben. Sie können auch <tbody> und <thead> Tags verwenden, sie sind sehr nützlich, um den Code zu verstehen.