當我將屏幕尺寸調整為小於600像素時，媒體查詢不起作用

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>