Responsive table bootstrap

Question

Okay, ich möchte diese Tabelle ansprechend gestalten und sie ordentlich auf die rechte Seite des Inhalts der ersten Zeile stellen, die "Infographic Shows Marvel Superhero Costume Changes" ist.

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

Bisher habe ich versucht, dies:

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

Aber wie Sie im Bild unten sehen können, ist die Tabelle eine Lücke zwischen den Reihen zu schaffen und nicht richtig ausgerichtet werden. Kann mir jemand etwas Licht dazu zeigen? http://2.1m.yt/xvq7k9b.jpg

https://jsfiddle.net/6jx6t6jo/

Answer 1

Die HTML in Ihrer Geige war nicht korrekt. Sie haben ein paar <tr> Tags vergessen. Und für table-responsive Klasse zu arbeiten, müssen Sie table Klasse <table> geben.

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>