javascript - ブートストラップグリッドシステムでテーブルを使用する方法

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>

私を助けてください...