Question

好的，所以我想让这张桌子反应灵敏，把它整齐地放在第一排内容的右侧，这是＃34;信息图表显示漫威超级英雄的服装变化＆＃34;。

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

响应表引导程序

1 个答案: