Получение HTML-таблицы "squish"

Question

Мой работодатель хотел, чтобы я взял таблицу, которая была у нас на сайте, и сделал ее более отзывчивой.Мое решение состояло в том, чтобы заставить таблицу реагировать так, как подробно описано в моем предыдущем вопросе ( Отзывчивое отображение таблицы )

После того, как я реализовал этот дизайн, мне сообщили, что они на самом деле просто хотятТаблица из 5 столбцов «сжата», так что она сохраняет все пять столбцов, но просто помещает их в область просмотра, особенно на мобильных устройствах.

Мой HTML выглядит в основном так:

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

Поскольку я полностью самоучка и занимаюсь этим уже несколько месяцев, что я могу сделать, чтобы таблица сжималась во всю ширину в мобильном представлении?

Answer 1

Если ваша таблица содержится в элементе, который составляет 100% ширины экрана, вы должны установить ширину таблицы на 100%.Если контейнер таблицы не обязательно равен 100% ширины экрана, вы можете установить ширину таблицы на 100vw.Единица vw представляет процент от общей ширины области просмотра.Это не поддерживается в IE8 или ниже.

Если их ширина не указана, столбцы будут автоматически расширены до ширины таблицы.

Использование медиазапроса из вашего предыдущего вопроса:

@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {
    table {
        width: 100%; /* or 100vw depending on the rest of your HTML */
    }
...
}

Если вам нужно контролировать ширину столбцов, вы можете сделать это, установив th и td s на фиксированную процентную ширину (которая равна 100), или изменив table-layout собственность.Если вы установите для таблицы значение table-layout: fixed;, все столбцы будут одинаково.