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

你是否想要取得这样的成就？

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

Answer 2

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

并且实际上不需要创建多个表，因此您的代码可能看起来像这样

＆＃13;

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

＆＃13;

水平显示表格中的结果

2 个答案: