如何为小于 600 的小屏幕创建响应表

Question

我需要帮助缩小表格的整体尺寸以适应所有屏幕尺寸，我已经涵盖了大多数尺寸，但无法缩小用于 600 或更小的移动屏幕尺寸。我主要在媒体查询中使用弹性框，但无法将尺寸缩小到 600 以内。我遗漏了一些东西，但不能指望它。 查看我的代码，请告知我缺少的内容。我很感激任何帮助。 我肯定会踢自己的..

.table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.table td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: black;
}

.table th {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: black;
}

.table .index-table {
    border-color: inherit;
    text-align: center;
    vertical-align: middle
}

@media screen and (max-width: 767px) and (max-width: 1025px)and (max-width: 300px) {
    .table {
        overflow-x: auto;
    }
    .index-table {
        width: auto !important;
    }
}

<table class="table">
        <tr>
            <th class="index-table" colspan="15">Seattle</th>
        </tr>
        <tr>
            <td class="index-table" colspan="15">Hinged Shutter Specification</td>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="3">Louver Size</td>
            <td class="index-table" colspan="8">Width</td>
            <td class="index-table" colspan="4" rowspan="2">Height</td>
        </tr>
        <tr>
            <td class="index-table" colspan="2" rowspan="2">Min</td>
            <td class="index-table" colspan="6">Max</td>
        </tr>
        <tr>
            <td class="index-table" colspan="2">Single Hung</td>
            <td class="index-table" colspan="2">Bi-Fold</td>
            <td class="index-table" colspan="2">Multi-Fold</td>
            <td class="index-table" colspan="2">Min.</td>
            <td class="index-table" colspan="2">Max*</td>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">47mm</td>
            <td class="index-table" colspan="2" rowspan="10">152mm</td>
            <td class="index-table" colspan="2" rowspan="2">600mm</td>
            <td class="index-table" colspan="2" rowspan="10">600mm</td>
            <td class="index-table" colspan="2" rowspan="10">N/A</td>
            <td class="index-table" colspan="2" rowspan="10">250mm</td>
            <td class="index-table" colspan="2" rowspan="10">300mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">63mm</td>
            <td class="index-table" colspan="2" rowspan="8">750mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">76mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">89mm</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td class="index-table" colspan="3" rowspan="2">114mm</td>
        </tr>
        <tr>
        </tr>
    </table>

Answer 1

您需要做的就是让您的网站/页面适合移动设备。为此，您必须设置视口，您可以通过添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在您的html 文件中的head 标记中，一切顺利。阅读更多关于它的信息here。