表格宽度在移动设备上奇怪缩小

我正在设计一个网站，我正在设计移动版本/大小的表格越来越小 . 我已经检查过，这不是标签未被封闭或格式错误的问题;代码在html5中验证 . 我在桌面或平板电脑版本中没有出现此错误，但是当应用移动版本的媒体查询时，它会缩小 .

对不起，这可能是一个非常复杂的问题！

这是代码：

<table id="general"><tr>
            <td class="cell-small"><h2>General Dermatology</h2><p>CanopyMD is a trusted, respected medical provider of treatments for diseases of the skin, hair, and nails.</p></td>
            <td class="cell-big"><img src="general.jpg" class="right-img" alt="General Dermatology CanopyMD" /></td>
        </tr></table>
        <table id="cosmetic"><tr>
            <td class="cell-big"><img src="cosmetic.jpg" class="left-img" alt="Cosmetic Dermatology CanopyMD"/></td>
            <td class="cell-small"><h2>Cosmetic Dermatology</h2><p>Patients of our cosmetic services understand our sense of professionalism and responsibility.</p><p><a href="/cosmetic">View Our Services</a></p></td>
        </tr></table>
        <table id="about"><tr>
            <td class="cell-small"><h2>About Us</h2><p>We have been serving the community for over a decade.</p><p><a href="/about/our-staff.html">Our Staff</a></p><p><a href="/about/our-office.html">Our Offices</a></p></td>
            <td class="cell-big"><img src="about.jpg" class="right-img" alt="Our Office CanopyMD" /></td>
        </tr></table>
        <table id="contact"><tr>
            <td class="cell-big"><img src="contact.jpg" class="left-img" alt="Live Chat CanopyMD" /></td>
            <td class="cell-small"><h2>Contact Us/Live Chat</h2><p><a href="/contact.php">Make an Appointment</a></p><p><a href="/ask-a-nurse.php">Ask A Nurse</a></p></td>
        </tr></table>
        <table id="resources"><tr>
            <td class="cell-small"><h2>Patient Resources</h2>
            <form name="PrePage" method="post" action="https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx"><input type="hidden" name="LinkId" value="3bd29747-6b29-43c1-897c-77ec8b3a1d76" /><p><a href="#" onclick="PrePage.submit();">Make a Payment</a></p></form>
            <p><a href="/resources/patient-forms.php">Patient Forms</a></p><p><a href="https://hartsoughdermatology.nextechweb.com/patient" target="_blank">Patient Portal</a></p></td>
            <td class="cell-big"><img src="resources.jpg" class="right-img" alt="Patient Resources CanopyMD" /></td>
        </tr></table>

这是适用的CSS：

.cell-big {
    width: 58%;
    border: none;
    padding: 0;
    line-height: 0;
}
.cell-big:nth-child(even) {
    text-align: right;
}
.cell-big img {
    max-width: 100%;
    width: 100%;
}

@media all and (max-width: 689px) {
    h2 { margin-bottom: 4%; }
    h2::after { display: none; }
    .cell-small a {   
        margin-left: 12.5%;
        width: 75%;
    }
    body { background-image: none; }
    table { width: 100%; }
    .cell-big { display: none; }
    .cell-small {
        width: 100%;
        padding: 4% 0 13% 0;
    }
    #header { margin-bottom: 0; }
    #tree { display: none; }
    #black { display: none; }
    .thirds { display: none; }
    #logo {
        max-width: 70%;
        width: 70%;
        margin-left: 15%;
        margin-top: 7%;
    }
    #iconholder {
        width: 68%;
        padding-top: 4%;
    }
    .cell-small::before {
        content: "";
        display: block;
        width: 100%;
        background-size: cover;
        background-position: center;
        height: 175px;
    }
    #general .cell-small::before { background-image: url("general.jpg"); }
    #cosmetic .cell-small::before { background-image: url("cosmetic.jpg"); }
    #about .cell-small::before { background-image: url("about.jpg"); }
    #contact .cell-small::before { background-image: url("contact.jpg"); }
    #resources .cell-small::before { background-image: url("resources.jpg"); 
}
}

这是整页的屏幕截图;这就是它在Chrome，Firefox和IE中的显示方式：