如何使用表自举电网系统

Question

我的目标是显示4个表，这将是接近对方，而不是下相互 这样的：

table 1 , table 2, table 3, table 4 

我试图实现并网系统带有“行”为引导的API表示，但对于我的一些结果的显示方式是这样的：

table1 
table2 
table3 
table4 

这是我的代码：（它只有2表，但还是一样的糟糕结果）：

<div class="row"> 
    <div class="span4"> 
    <table class="table table-condensed table-bordered"> 
    <tr> 
     <th>Hour</th> 
     <th>Player 1</th> 
     <th>Player 2</th> 
    </tr> 
    <tr ng-repeat="court in courts"> 
     <td>{{court.id}}</td> 
     <td>{{court.hour}}</td> 
     <td>{{court.date}}</td> 
    </tr> 
    </div> 
    <div class="span4"> 
    <table class="table table-condensed table-bordered"> 
    <tr> 
     <th>Hour</th> 
     <th>Player 1</th> 
     <th>Player 2</th> 
    </tr> 
    <tr ng-repeat="court in courts"> 
     <td>{{court.id}}</td> 
     <td>{{court.hour}}</td> 
     <td>{{court.date}}</td> 
    </tr> 
    </div> 
</div> 

请帮我...

Answer 1

这里有2代表的总体思路...

<!--// put it in a container //--> 
<div class="container"> 
    <div class="row"> 
    <div class="span4"> 
     <table class="table table-condensed table-bordered"> 
     <tr> 
      <th>Hour</th> 
      <th>Player 1</th> 
      <th>Player 2</th> 
     </tr> 
     <tr ng-repeat="court in courts"> 
      <td>{{court.id}}</td> 
      <td>{{court.hour}}</td> 
      <td>{{court.date}}</td> 
     </tr> 
     <!--// close your tables //--> 
     </table> 
    </div> 
    <div class="span4"> 
     <table class="table table-condensed table-bordered"> 
     <tr> 
      <th>Hour</th> 
      <th>Player 1</th> 
      <th>Player 2</th> 
     </tr> 
     <tr ng-repeat="court in courts"> 
      <td>{{court.id}}</td> 
      <td>{{court.hour}}</td> 
      <td>{{court.date}}</td> 
     </tr> 

     </table> 
    </div> 
    </div> 
</div> 

Demo