Ответственный загрузочный стол таблицы

Question

Итак, я хочу, чтобы эта таблица была отзывчивой и аккуратно поместила ее в правую часть содержимого первой строки, которая представляет собой «Инфографические иллюстрации изменений костюма супергероя Marvel».

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