在水平表中顯示結果

Question

我正在使用引導程序3並試圖弄清楚如何獲得一些結果以在表中水平對齊而不是垂直對齊。見我bootply

我要實現的是這樣的：

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

但我不斷收到這樣的：

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

的HTML

<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

你是想實現的東西喜歡這個？

<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 -->