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

标签 html css html-table media-queries

我正在设计的网站出现一个奇怪的错误,其中移动版本/大小的表格逐渐变小。我已经检查过了,这不是标签未关闭或 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 中的显示方式:

最佳答案

在表格标签上,不要使用display: block;因为它已经有一个 display: table;它用于正确格式化它。

关于html - 表格宽度在移动设备上奇怪地缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30652681/

相关文章:

html - MIME 类型 : Linking to CSS w/a txt Extension

html - 网格项不会占据父容器的全高

html - 表边界半径溢出 : hidden hides table border

html - 只更改一张表的 td padding,不影响其他表的样式?

html - 溢出表TD宽度相对宽度

html - 如何隐藏水平条滚动条但保持滚动功能

javascript - 在 HTML 页面中,我需要在鼠标悬停时锚定到标签

html - 在移动 View 上重新定位图像

html - 如何通过一个 ID 选择器使用多个类?

html - 如何组成覆盖 html 表格的各个单元格(具有自己的内容)的元素?