响应式桌面引导

Question

好吧，我想让这个表响应并将它整齐地放置在“信息图表显示惊奇超级英雄服装变化”的第一行内容的右侧。

<table > 
<thead> 
    <tr> 
    <th colspan="3"> WEEKEND BOX OFFICE TOP 10</th> 
    </tr><!-- Table Header --> 
    </thead> 
    <tbody> 
<tr> <!-- Table Row --> 
<td>1.</td> 
<td colspan="3">The Magnificent Seven</td> 
<td>$34.7M</td> 
</tr> 
    <tr class='even'> 
    <td>2.</td> 
    <td colspan="3">Storks</td> 
    <td>$21.3M</td> 
    </tr><!-- Darker Table Row --> 

    <tr class='even'> 
    <td>3.</td> 
    <td colspan="3">Sully</td> 
    <td>$13.5M</td> 
    </tr> 
    <tr class='even'> 
    <td>4.</td> 
    <td colspan="3">Bridget Jones's Baby</td> 
    <td>$4.7M</td> 
    </tr> 
    <tr class='even'> 
    <td>5.</td> 
    <td colspan="3">Snowden</td> 
    <td>$4.1M</td> 
    </tr> 
    <tr class='even'> 
    <td>6.</td> 
    <td colspan="3">Blair Witch</td> 
    <td>$4.1M</td> 
    </tr> 
    <tr class='even'> 
    <td>7.</td> 
    <td colspan="3">Don't Breathe</td> 
    <td>$3.8M</td> 
    </tr> 
    <tr class='even'> 
    <td>8.</td> 
    <td colspan="3">Suicide Squad</td> 
    <td>$3.1M</td> 
    </tr> 
    <td>9.</td> 
    <td colspan="3">When the Bough Breaks</td> 
    <td>$2.5M</td> 
    </tr> 
    <td>10.</td> 
    <td colspan="3">Kubo and the Two Strings</td> 
    <td>$1.1M</td> 
    </tr> 
    </tbody> 
</table> 
</div> 

到目前为止，我尝试这样做：

 <aside class="col-lg-4 col-md-5 col-lgpush-3 col-sm-push-4""> 
<div class="table-responsive"> 
<table > 

<thead> 
    <tr> 
    <th colspan="3"> WEEKEND BOX OFFICE TOP 10</th> 
    </tr><!-- Table Header --> 
    </thead> 
    <tbody> 
<tr> <!-- Table Row --> 
<td>1.</td> 
<td colspan="3">The Magnificent Seven</td> 
<td>$34.7M</td> 
</tr> 
    <tr class='even'> 
    <td>2.</td> 
    <td colspan="3">Storks</td> 
    <td>$21.3M</td> 
    </tr><!-- Darker Table Row --> 

    <tr class='even'> 
    <td>3.</td> 
    <td colspan="3">Sully</td> 
    <td>$13.5M</td> 
    </tr> 
    <tr class='even'> 
    <td>4.</td> 
    <td colspan="3">Bridget Jones's Baby</td> 
    <td>$4.7M</td> 
    </tr> 
    <tr class='even'> 
    <td>5.</td> 
    <td colspan="3">Snowden</td> 
    <td>$4.1M</td> 
    </tr> 
    <tr class='even'> 
    <td>6.</td> 
    <td colspan="3">Blair Witch</td> 
    <td>$4.1M</td> 
    </tr> 
    <tr class='even'> 
    <td>7.</td> 
    <td colspan="3">Don't Breathe</td> 
    <td>$3.8M</td> 
    </tr> 
    <tr class='even'> 
    <td>8.</td> 
    <td colspan="3">Suicide Squad</td> 
    <td>$3.1M</td> 
    </tr> 
    <td>9.</td> 
    <td colspan="3">When the Bough Breaks</td> 
    <td>$2.5M</td> 
    </tr> 
    <td>10.</td> 
    <td colspan="3">Kubo and the Two Strings</td> 
    <td>$1.1M</td> 
    </tr> 
    </tbody> 
</table> 
</div> 
</aside> 

但是，正如你可以在下面的图片中看到，表中创建行之间的差距，并没有正确对齐。任何人都可以告诉我一些这方面的灯​​光？ http://2.1m.yt/xvq7k9b.jpg

https://jsfiddle.net/6jx6t6jo/

Answer 1

的HTML在你的小提琴是不正确的。你忘了几个<tr>标签。 而对于table-responsive类的工作，你必须给table类<table>。

的jsfiddle：https://jsfiddle.net/6jx6t6jo/1/

<div class="table-responsive"> 
    <table class="table"> 

     <thead> 
      <tr> 
       <th colspan="3 "> WEEKEND BOX OFFICE TOP 10</th> 
      </tr><!-- Table Header --> 
     </thead> 
     <tbody> 
      <tr> <!-- Table Row --> 
       <td>1.</td> 
       <td colspan="3 ">The Magnificent Seven</td> 
       <td>$34.7M</td> 
      </tr> 
      <tr class='even'> 
       <td>2.</td> 
       <td colspan="3 ">Storks</td> 
       <td>$21.3M</td> 
      </tr><!-- Darker Table Row --> 

      <tr class='even'> 
       <td>3.</td> 
       <td colspan="3 ">Sully</td> 
       <td>$13.5M</td> 
      </tr> 
      <tr class='even'> 
       <td>4.</td> 
       <td colspan="3 ">Bridget Jones's Baby</td> 
       <td>$4.7M</td> 
      </tr> 
      <tr class='even'> 
       <td>5.</td> 
       <td colspan="3 ">Snowden</td> 
       <td>$4.1M</td> 
      </tr> 
      <tr class='even'> 
       <td>6.</td> 
       <td colspan="3 ">Blair Witch</td> 
       <td>$4.1M</td> 
      </tr> 
      <tr class='even'> 
       <td>7.</td> 
       <td colspan="3 ">Don't Breathe</td> 
       <td>$3.8M</td> 
      </tr> 
      <tr class='even'> 
       <td>8.</td> 
       <td colspan="3 ">Suicide Squad</td> 
       <td>$3.1M</td> 
      </tr> 
      <tr> 
       <td>9.</td> 
       <td colspan="3 ">When the Bough Breaks</td> 
       <td>$2.5M</td> 
      </tr> 
      <tr> 
       <td>10.</td> 
       <td colspan="3 ">Kubo and the Two Strings</td> 
       <td>$1.1M</td> 
      </tr> 
     </tbody> 
    </table> 
</div>