css - 在表格中水平显示结果

Question

我正在使用 bootstrap 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 -->