Проблемы с отображением таблицы в мобильной версии моего сайта

Question

Я пытался решить эту проблему в течение 10 дней, и все же я не мог найти никакого решения.

У меня есть таблица, которая отлично отображается на настольной версии, но на мобильном телефоне она выходит за пределы области страницы, я также попытался @media screen max width 600px изменить размер таблицы и скрыть переполнение, но все еще не работает, я буду вставьте код ниже:

<style type="text/css">
    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border: 1px solid #d3d3d3;
        text-align: center;
        white-space: nowrap;
    }

    th {
        background-color: #0288D1;
        border: 2px solid #d3d3d3;
        text-align: center;
        font-size: large;
        color: white;
        text-transform: uppercase;
    }
</style>

<table>
    <thead>
        <tr>
            <th colspan="4" style="background-color:#0277BD"><strong>Some Text Here<strong></th></tr>
<tr>
<th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>
                <a rel="nofollow" target="_blank" href="https://somesite.com/play"><img width="200" height="80" src="https://somesite.com/image.png" alt="Some Text Here"></a>
            </td>

            <td><strong><font color="green">Some Text Here</font></strong></td>
            <td>Some Text Here</td>

            <td>
                <div>
                    <button class="playblock" style="display:block;width:150px;height:50px;background-color:#4CAF50;margin-bottom:5px;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='#4CAF50'" onclick="window.location.href = 'https://somesitehere.com/play';">PLAY</button>
                </div>

                <div>
                    <button class="reviewblock" style="display:block;width:150px;height:50px;background-color:#EB9C12;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='orange'" onMouseOut="this.style.backgroundColor='#EB9C12'" onclick="window.location.href = 'https://somesitehere.com/see/';">REVIEW</button>
                </div>
            </td>
        </tr>

Answer 1

Это распространенная проблема с таблицами на мобильных устройствах. Неясно, используете ли вы таблицу для разметки или у вас будет больше строк данных со ссылками Play и Review.

1. Если вы используете его для макета, я бы предложил вместо этого использовать макет flexbox.
2. Если вы планируете иметь больше строк в таблице, вы можете обернуть таблицу в <div> с max-width: 100%; overflow: auto;, что позволит горизонтальной прокрутке div / table, но никак не повлияет на макет страницы. Сопоставьте это с уменьшенным размером шрифта на меньших экранах, и, IMO, вы получите довольно удобную таблицу на мобильном телефоне.
3. Существует несколько способов изменить способ отображения таблицы на маленьких экранах с помощью атрибута данных (например, data-title) в <td> и <th>, которые дублируют заголовок столбца, так что на маленьких экранах вы можете вытащите атрибут data с помощью псевдоэлемента ::before, например td::before { content: attr(data-title); }, и укажите элементам таблицы все значения display: block; и задайте им стиль, как будто каждая строка является собственной таблицей.
   Вот пример из CSS Tricks: https://css -tricks.com / respive-data-tables /

Answer 2

Вы должны решить, как это должно выглядеть на мобильном телефоне.Простое решение - установить минимальную ширину на столе, но это может сделать вещи на мобильных устройствах меньше.Вы также должны использовать медиа-запрос, чтобы сделать кнопки меньше, они очень большие.

table { min-width: 500px; }

Answer 3

Спасибо за ваши отзывы.

Я исправил это сам после некоторого тестирования, используя:

@media only screen and (max-width: 800px) { ... }

Answer 4

Добавьте элемент контейнера с overflow-x:auto вокруг <table>, например:

<div style="overflow-x:auto;">
     <table>
         ...
     </table>
</div>

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