Ответить на тему  [ Сообщений: 3 ] 
Адаптивная таблица 
Автор Сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 305
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Адаптивная таблица
День добрый)
Подскажите - как прописать в css, чтобы таблица выводилась вот так:

На компьютере выводится так
Столбец 1 Столбец 2

На мобильном нужно
Столбец 1
Столбец 2

P.S. Я использую табличный выод во вьюшке, может есть какое-то другое решение

_________________
http://layf.info/ - информируйся и развлекайся


10 июл 2017, 11:30
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 913
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 778
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Адаптивная таблица
Добрый день! Как вариант прописать так:
Код:
@media all and (max-width: 960px){
   table, tbody, tr, td {display: block;}
   td {width: 100%;}
}

Цитата:
Я использую табличный выод во вьюшке, может есть какое-то другое решение

Я бы смотрел в сторону гибких элементов (применение flexbox)

_________________
Не всё валидно, что не видно.


10 июл 2017, 12:00
Профиль Отправить личное сообщение
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 3944
Репутация: 2223
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Адаптивная таблица
Добрый день!
@media - хороший способ перевести табличный в адаптивный.
Только надо иметь ввиду, что используя в таблице, например <th>, можно получить не совсем то, что хотелось.

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


10 июл 2017, 13:48
Профиль Отправить личное сообщение WWW
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 3 ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме РЕШЕНО:IE 8 съехала таблица с результатами опроса за контент

в форуме CSS И ВЕРСТКА

caitleen

1

1114

17 ноя 2010, 11:05

caitleen Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Прайс лист в виде таблица Excel

в форуме ВНЕШНИЕ РАСШИРЕНИЯ ДЛЯ JOOMLA

Абдул

0

796

11 июн 2012, 18:55

Абдул Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме незнаю как сделать чтоб сайт был как таблица

в форуме HTML

санёк1

5

1300

10 мар 2009, 17:05

imfear Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме некорректно отображается таблица в хроме

в форуме CSS И ВЕРСТКА

spro1

2

1364

20 фев 2013, 12:12

spro1 Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Таблица с несовпадающими по вертикали столбиками

в форуме HTML

Pogo

2

671

26 мар 2010, 22:07

Pogo Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: