如何在 Bootstrap 中使用 colspan答案

【问题标题】：How to use colspan in Bootstrap如何在 Bootstrap 中使用 colspan
【发布时间】：2017-05-31 16:45:42
【问题描述】：

我正在使用 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" 都不起作用。如何解决？

【问题讨论】：

标签： css twitter-bootstrap angular

【解决方案1】：

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

style="width: 50%"

将引导程序提供的类 table-responsive 添加到您的表格或使用以下方法为您的表格设置宽度：

width: 100%;

【讨论】：

【解决方案2】：

如果您想用 12 列的表填充您的 div.panel-body，您必须将 overflow-x: scrollbar 添加到 div 或从一开始就将您的表格式化为 5 列。 12 列的表可以有weird look。另外，您可以使用<tbody> 和<thead> 标签，它们对于理解代码非常有用。

【讨论】：