Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Таблицы для сайта. (Адаптивные таблицы для сайта.)
Таблицы для сайта.
medved2121
Сообщений: 41
Репутация: 0

Сообщение # 1 | 23:15:13
Доброго времени суток.

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

mrx
Сообщений: 288
Репутация: 45

Сообщение # 2 | 23:44:00
medved2121, самый простой способ - обернуть таблицу в контейнер и присвоить ему overflow:auto.
medved2121
Сообщений: 41
Репутация: 0

Сообщение # 3 | 23:51:20
mrx, по подробнее можно?

mrx
Сообщений: 288
Репутация: 45

Сообщение # 4 | 00:22:57
HTML:

Код
<div class="table_wrap">
Сюда поместить вашу таблицу
</div>


CSS:

Код
.table_wrap {overflow:auto}


Таким образом, таблица внутри <div> сохранит исходный размер, но появится горизонтальная полоса прокрутки, с помощью которой можно скроллить таблицу слева направо. При этом страница не будет вылезать за пределы экрана и сохранит "адаптивность".
Сообщение отредактировал mrx - Воскресенье, 26 Фев 2017, 00:23:36
medved2121
Сообщений: 41
Репутация: 0

Сообщение # 5 | 00:32:10
mrx, попробую, спасибо! Подскажите, а что можно предпринять что-бы в дальнейшем убрать "полосу прокрутки"?

mrx
Сообщений: 288
Репутация: 45

Сообщение # 6 | 00:52:04
medved2121, если таблица большая, то при всём желании её не получится уместить на экране смартфона/телефона, поэтому всё равно понадобится прокрутка. Или можно стилизовать таблицу как блочный элемент display:block, но в таком случае нужно изначально оформлять её как-то иначе.
medved2121
Сообщений: 41
Репутация: 0

Сообщение # 7 | 00:54:42
mrx, Спасибо!!! Потестил, в таком виде гораздо лучше, скорее всего так и оставлю. Проблема решена, тему можно отправлять в архив.

Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Таблицы для сайта. (Адаптивные таблицы для сайта.)
Страница 1 из 11
Поиск: