Question

我正在开发一个小项目，该项目正在创建具有来自数据库的不同统计信息的表。填写表格的部分是有效的，但是导致我麻烦的是基本的HTML＆amp; 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%; }
}

Answer 2

在媒体查询中，如下所示删除浮动并将宽度设置为自动。

@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;
  }
}

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

2 个答案: