Ergebnisse horizontal in einer Tabelle anzeigen

Question

Ich benutze Bootstrap 3 und versuche herauszufinden, wie man Ergebnisse erhält, um sich horizontal in einer Tabelle und nicht vertikal auszurichten. Siehe meine bootply

Ich möchte etwas wie folgt erreichen:

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

Aber ich erhalte immer diese:

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

Die 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

Als <tr></tr> schafft neue Zeilen, die Sie benötigen

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

jene zwischen den Zellen in jeder Tabelle zu entfernen, und es gibt wirklich keine Notwendigkeit, mehrere Tabellen zu machen, damit Ihre Code könnte so aussehen

<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

Sind Sie zu etwas erreicht versuchen so was?

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