html - 表格在小屏幕上重叠

Question

我正在做一个小元素，该元素正在创建具有来自数据库的不同统计信息的表。填写表格的部分工作正常，但给我带来麻烦的是基本的 HTML 和 CSS。出于某种原因，我无法弄清楚为什么我在较小屏幕上的表格会重叠。我想要做的是让他们换一条新线或类似的东西，并希望就我如何做到这一点提供一些意见。

附件是一个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%; }
}