CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Matthieu Topize
Matthieu Topize

Reputation: 41

Responsive table bootstrap

Okay so I want to make this table responsive and place it neatly to the right side of the content of the first row which is "Infographic Shows Marvel Superhero Costume Changes".

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

So far I tried this:

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

But as you can see in the picture below , the table is creating a gap between the rows and is not aligning properly. Can anyone show me some light on this ? http://2.1m.yt/xvq7k9b.jpg

https://jsfiddle.net/6jx6t6jo/

Upvotes: 1

Views: 106

Answers (1)

tejashsoni111
tejashsoni111

Reputation: 1405

The HTML in your fiddle was not correct. You forgot couple of <tr> tags. And for table-responsive class to work, you have to give table class to the <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>

Upvotes: 1

Related Questions