Ширина стола Странно сжимается на мобильном телефоне

Question

У меня возникла странная ошибка с веб-сайтом, в котором я разрабатываю, где мобильная версия/размер имеет таблицы, постепенно уменьшающиеся. Я проверил, и это не проблема тегов, которые были закрыты или искажены html; код проверяется в 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:

Answer 1

На таблице тегов, не используйте дисплей: блок; потому что у него уже есть дисплей: table; что он использует для правильного форматирования.