Как создать адаптивную таблицу для маленьких экранов размером менее 600 - PullRequest
Новая
       60

Как создать адаптивную таблицу для маленьких экранов размером менее 600

0 голосов
/ 06 марта 2020

Мне нужна помощь, чтобы уменьшить общий размер таблицы, чтобы она соответствовала размерам всех экранов, большинство размеров я охватил, но не могу уменьшить масштаб для экранов мобильных устройств 600 или меньше. Я в основном использую flex box в медиа-запросе, но не могу уменьшить размер меньше 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>

1 Ответ

0 голосов
/ 06 марта 2020

Все, что вам нужно сделать, это сделать ваш сайт / страницу мобильными. Для этого вам нужно настроить окно просмотра. Вы можете сделать это, добавив:

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

в теге head в файле html и ваш товар к go. Подробнее об этом здесь .

...