html - 响应式表格 Bootstrap

Question

好的，所以我想让这个表格响应式，并将它整齐地放在第一行内容的右侧，即“信息图显示 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>

到目前为止我试过这个:

        <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

您的 fiddle 中的 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>