如何使用表自舉電網系統

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