Question

关注此问题：Responsive table with vertical and horizontal headers

我遇到了这个问题（codepen）：

enter image description here

我希望第二张表格低于第一张表格。我可以通过发送一些<br>垃圾邮件来实现这一点。但必须有更好的方法来做到这一点......

这是我的 CSS ：

    .aa table {
  border-collapse: collapse;  
} 

.aa td, .aa th {
  border: 1px #ddd solid;
}
.aa table {
  margin: 20px 0;
}
.aa td, .aa th {
  padding: 10px;
}

@media all and (min-width: 640px) {


   .aa table  {
      float: left;
     display: block;
   }


   .aa table ~ table td, 
   .aa table ~ table th  { border-left: 0;  }

   .aa table ~ table tr:first-child  th:first-child  { display: none; }
   .aa table ~ table tr:not(:first-child) th  { display: none; }
}

HTML：

<!-- Table 1 -->
<h3>Table 1</h3>
<div class='aa'>
<table>
    <tr>
        <th></th>
        <th scope="col">BMW</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>12001</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>7001</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>12301</td>
    </tr>
</table>

<table>
    <tr>
        <th></th>
        <th scope="col">Audi</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>10001</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>8201</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>10501</td>
    </tr>
</table>

<table>
    <tr>
        <th></th>
        <th scope="col">Mercedes</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>14201</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>6201</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>11701</td>
    </tr>
</table>
  <!--<br><br><br><br><br><br><br><br><br><br><br><br>-->
</div>
<h3>Table 2</h3>
<!-- Table 2-->
<div class='aa'>
 <table>
    <tr>
        <th></th>
        <th scope="col">BMW</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>1200</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>700</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>1230</td>
    </tr>
</table>

<table>
    <tr>
        <th></th>
        <th scope="col">Audi</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>1000</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>820</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>1050</td>
    </tr>
</table>

<table>
    <tr>
        <th></th>
        <th scope="col">Mercedes</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>1420</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>620</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>1170</td>
    </tr>
</table>
</div>

Answer 1

请参阅此fiddle

此行为是由于您float:left使用的.aa table所致。因此，要取消已使用的浮动，您必须清除应用的浮动。因此，您可以使用clear: both;。请按以下方式为h3添加样式

h3{
      clear: both;
}

Answer 2

aa表类是你的问题。如果向左浮动，所有表格将并排。因此，要解决此问题，您必须删除该声明，或清除浮动。

可能很简单：

<table>
      ...
</table>
<div class="clearfix"></div>
<table>
      ...
</table>


.clearfix {
   clear:both;
}

Answer 3

我相信您可以通过修改表容器div元素来使用样式display: inline-block来完成此工作。

因此，您只需向aa类添加样式，例如：

.aa {
  display: inline-block;
}

您可以查看updated codepen example。

使下一个div保持在当前值之下

3 个答案:

请参阅此fiddle