結果をテーブルに水平に表示

Question

私はブートストラップ3を使用していて、結果をどのようにしてテーブル内で水平に整列させ、垂直に整列させるのか把握しようとしています。

Peter| Orange, banana, apple 
John | Apple, orange 
Mary | 
Sam | Orange 

しかし、私はこの得続ける：

<div class="container"> 
    <div class="row"> 


<br> 


<span class="label label-default\">table</span> 

<h2>Table 2</h2> 
<table><tbody><tr><td><span class="label label-default">Mary</span></td></tr><tr><td><span class="label label-success"></span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">John</span></td></tr><tr><td><span class="label label-success">banana</span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">Peter</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr></tbody></table><table><tbody><tr><td><span class="label label-default">Sue</span></td></tr><tr><td><span class="label label-success">orange</span></td></tr><tr><td><span class="label label-success">apple</span></td></tr></tbody></table> 

</div> <!-- /col.8 --> 
</div><!-- /center-block --> 

Answer 1

<tr></tr>を使用すると、各テーブル内

<tr> 
     <td> 
     <span class="label label-default">Mary</span> 
     </td> 
     <!-- removed the close and start "tr" tag from here --> 
     <td> 
     <span class="label label-success"></span> 
     </td> 
    </tr> 

を細胞間のそれらを削除する必要が新しい行を作成し、複数のテーブルを作成する必要は本当にありませんので、あなたのようコードは次のようになります

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <span class="label label-default\">table</span> 
 
    <h2>Table 2</h2> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <span class="label label-default">Mary</span> 
 
      </td> 
 
      <td> 
 
      <span class="label label-success"></span> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <span class="label label-default">John</span> 
 
      </td> 
 
      <td><span class="label label-success">banana</span> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="label label-default">Peter</span> 
 
      </td> 
 
      <td><span class="label label-success">orange</span> 
 
      </td> 
 
      <td><span class="label label-success">orange</span> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <!-- /col.8 --> 
 
    </div> 
 
    <!-- /center-block -->

Answer 2

あなたが何かを達成しようとしています

Peter| 
    Orange, 
    banana, 
    apple 
    John | 
    Apple, 
    orange 
    Mary | 
    Sam | 
    Orange 

にHTMLを、私はこのような何かを達成したい私のbootply

を参照してください。このような？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 

 
<br> 
 

 

 
<span class="label label-default\">table</span> 
 

 
<h2>Table 2</h2> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
     <td><span class="label label-default">Mary</span></td> 
 
     
 
     <td><span class="label label-success">data</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
     <td><span class="label label-default">John</span></td> 
 
    
 
     <td><span class="label label-success">banana</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
     <td><span class="label label-default">Peter</span></td> 
 
    
 
     <td><span class="label label-success">orange</span></td> 
 
    
 
     <td><span class="label label-success">orange</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
     <td><span class="label label-default">Sue</span></td> 
 
     
 
     <td><span class="label label-success">orange</span></td> 
 
    
 
     <td><span class="label label-success">apple</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 

 
</div> <!-- /col.8 --> 
 
</div><!-- /center-block -->