Question

我在分区下制作了一个表格，并在屏幕尺寸小于600px时使用媒体查询作为响应。但是当我调整窗口小于600px的窗口时，表格数据下的所有内容都来自分区。这是我的问题的截图：

以下是我用来制作此表的代码：

<div class="myfirst">
        <h1 class="myheading">About Us</h1>
        <table>
            <tr>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
            </tr>
        </table>
    </div>
<style>
.myfirst {
    width: 100%;
    height: 200px;
    background-color: aqua;
    margin-top: 0;
}

.myheading {
    margin-top: 0px;
    text-align: center;
    font-family: sans-serif;
}

table {
    color: black;
    padding: 25px 196px;
    font-weight: 30;
    margin-left: 75px;
}

tr {
    width: 318px;
    height: 29px;
}

td {
    border-right: 2px solid white;
    padding: 0 32px;
}

td:last-child {
    border: none;
}

@media screen and(max-width:600px) {
    .myfirst {
        width: 100%!important;
        height: 200%;
        background-color: aqua;
        margin-top: 0;
    }
    table,td,tr,span {
        float: left;
        clear: both;
        width: 100%;
        display: block;
        margin: 0px;
        padding: 0;
    }


</style>

Answer 1

使用@media screen and (max-width:600px)在and和(max-width:600px)

之间添加空格

.myfirst {
    width: 100%;
    height: 200px;
    background-color: aqua;
    margin-top: 0;
}

.myheading {
    margin-top: 0px;
    text-align: center;
    font-family: sans-serif;
}

table {
    color: black;
    padding: 25px 196px;
    font-weight: 30;
    margin-left: 75px;
}

tr {
    width: 318px;
    height: 29px;
}

td {
    border-right: 2px solid white;
    padding: 0 32px;
}

td:last-child {
    border: none;
}
@media screen and (max-width: 800px) {
   
    table,td,tr,span {
        margin-left: 0px!important;
        padding: 0;
    }
}
@media screen and (max-width: 600px) {
     .myfirst {
        width: 100%!important;
        height: 200%;
        background-color: aqua;
        margin-top: 0;
    }
    table,td,tr,span {
        float: left;
        clear: both;
        width: 100%;
        display: block;
        margin-left: 0px!important;
        padding: 0;
    }
}

<div class="myfirst">
        <h1 class="myheading">About Us</h1>
        <table>
            <tr>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
            </tr>
        </table>
    </div>

当我调整小于600像素的屏幕时，媒体查询不起作用

1 个答案: