響應式桌面引導

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>