css - 如何在 Bootstrap 中使用 colspan

Question

我正在使用 Angular 2 和 Bootstrap 构建一个应用程序。我的代码如下，

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

现在，当它加载位于 Away Team Statistics 或 Home Team Statistics 下的列时，它会超出面板。这是由于可变列数可能。为了更好地理解，我附上了屏幕截图。

我希望在 panel/table 之外的部分应该出现在面板内。 width:100% 或 colspan="5" 均无效。如何解决？

Answer 1

表格最后两列的内联样式是错误的。

style="width: 50%"  

将 Bootstrap 提供的类 table-responsive 添加到您的表格或使用以下方法为您的表格设置宽度:

width: 100%;