在水平表中显示结果

问题描述：

我正在使用引导程序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 -->

答

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

答

你是想实现的东西喜欢这个？

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

在水平表中显示结果

相关推荐