重叠在小小的屏幕上的表格

Question

我正在创建一个小型项目，它使用来自数据库的不同统计信息创建表格。填充表的部分正在工作，但是造成我麻烦的是CSS的基本HTML &。出于某种原因，我无法弄清楚为什么我的桌子在较小的屏幕上重叠。我想要做的是让他们去一个新的线或类似的东西，并希望我能做到这一点的一些输入。

附加是一个jsfiddle。

#section { 
 
    width:75%; 
 
    float:left; 
 
    padding:10px; 
 
    overflow: auto; 
 
} 
 
#stats { 
 
    width:25%; 
 
    float:left; 
 
    padding:10px; 
 
} 
 
table{ 
 
    border-collapse: collapse; 
 

 
} 
 
th{ 
 
    width: 100px; 
 
} 
 
table, th, td, tr{ 
 
    border: 1px solid black; 
 
} 
 
td { 
 
    /*padding:15px;*/ 
 
}

<div class="rt-container"> 
 
    <div id="rt-main" class="mb12-sa3"> 
 

 
    <div id="section"> 
 
     <h1>Stats</h1> 
 
     <p> 
 

 
     <div id="stats"> 
 
     Most Downloaded Courses 
 
     <table> 
 
      <tr> 
 
       <th>Course</th> 
 
       <th>Downloads</th> 
 
      </tr> 
 
      <tbody> 
 
         <tr> 
 
        <td>105239</td> 
 
        <td>1087</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105196</td> 
 
        <td>1064</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105190</td> 
 
        <td>598</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105230</td> 
 
        <td>588</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105560</td> 
 
        <td>458</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105260</td> 
 
        <td>436</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105475</td> 
 
        <td>381</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105108</td> 
 
        <td>374</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105217</td> 
 
        <td>334</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>105219</td> 
 
        <td>308</td> 
 
       </tr> 
 

 
         </tbody> 
 
      </table> 
 
     </div> <!-- end of stat --> 
 

 

 
     <div id="stats"> 
 
     Most Active Users via Download 
 
     <table> 
 
      <tr> 
 
       <th>User</th> 
 
       <th>Downloads</th> 
 
      </tr> 
 
      <tbody> 
 
         <tr> 
 
        <td>test@test.com</td> 
 
        <td>592</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>515</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>473</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>286</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>268</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>253</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>245</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>219</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>213</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>test@test.com</td> 
 
        <td>207</td> 
 
       </tr> 
 

 
         </tbody> 
 
      </table> 
 
     </div> <!-- end of stat --> 
 

 

 
     <div id="stats"> 
 
     Most Active Download Day 
 
     <table> 
 
      <tr> 
 
       <th>User</th> 
 
       <th>Downloads</th> 
 
      </tr> 
 
      <tbody> 
 
         <tr> 
 
        <td>2015-11-17</td> 
 
        <td>230</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-10-21</td> 
 
        <td>197</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-09-09</td> 
 
        <td>196</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-07-30</td> 
 
        <td>191</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-07-31</td> 
 
        <td>187</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-11-15</td> 
 
        <td>177</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-08-04</td> 
 
        <td>170</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-12-03</td> 
 
        <td>168</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2014-06-30</td> 
 
        <td>159</td> 
 
       </tr> 
 

 
          <tr> 
 
        <td>2015-11-16</td> 
 
        <td>157</td> 
 
       </tr> 
 

 
         </tbody> 
 
      </table> 
 
     </div> <!-- end of stat --> 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</div>

https://jsfiddle.net/we3mz8fk/

Answer 1

为小屏幕使用CSS媒体查询，

@media(max-width:767){ 
#stats{ width: 100%; } 
} 

Answer 2

在媒体查询，如下所示去除浮动，并设置宽度为auto 。

@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 480px) 
 
    and (-webkit-min-device-pixel-ratio: 2) { 
 
    #stats{ 
 
     float:none; 
 
     width:auto; 
 
    } 
 
}