Вопрос о мобильной отзывчивости

Question

https://ublostandfound.000webhostapp.com/list_of_lost_items.php

Этот сайт, если смотреть на мобильном телефоне имеет раздражающую тенденцию грызть вверх первые 4 колонки и сохранить последний столбец на полную длину. Кроме того, когда сайт впервые открывается, видны только первые 4 столбца. Есть ли исправление относительно:

A) Проблема, что все столбцы сразу не видны, и нужно прокрутить вправо, чтобы просмотреть пятый. B) Проблема в том, что таблица выглядит уродливой на мобильном устройстве, особенно с описанием хруст Как оно есть.

Answer 1

a) Чего вы ожидаете? Там просто не хватает места, поэтому, конечно, он вытолкнет правую сторону. Причина, по которой последний столбец заполняется, состоит в том, что это одно слово, и по умолчанию они не сломаются. Вы можете использовать word-break css-property, если хотите сломать одно слово.

word-break: break-all; 

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

б) Получение таблицы отзывчивым всегда сложно. Так как вы отметили вопрос с помощью начальной загрузки, я бы предложил посмотреть в .stable-отзывчивость бутстрапа. Это заставит вашу таблицу прокручивать по горизонтали, но полная страница останется на 100% ширины.

<div class="table-responsive"> 
    <table class="table"> 
     ... 
    </table> 
</div> 

http://getbootstrap.com/css/#tables-responsive