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下的列到面板外时。这是由于列数可变。我已附上截图以便更好地理解。 MSDN

我希望panel/table之外的部分出现在面板中。 width:100%或colspan="5"都不起作用。如何解决？

Answer 1

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

style="width: 50%"

将一个引导程序提供给您的表table-responsive或使用以下方法为表设置宽度：

width: 100%;

Answer 2

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

如何在Bootstrap中使用colspan

2 个答案: