Как сократить таблицу для мобильных устройств в HTML?

Question

[Илья]

Здравствуйте. Если коротко, то пишу сайт, на котором есть таблица, что-то вроде каталога, с картинками, надо как-то оптимизировать его под смартфоны. Таблица на семь ячеек. Если ее сокращать, то на компьютере выглядит не очень. Сайт не особо сложный, поэтому использую стандартные CSS-медиазапросы, то есть использую вот такую вставку в CSS:

@media only screen and (min-width : 320px) and (max-width : 480px) { . . . }

Все бы хорошо, но СSS позволяет настраивать только оформление (размер шрифта и картинок), а здесь получается нужно менять структуру таблицы. Как это лучше сделать?
Чего я хочу: на компьютере - 7 ячеек, на телефоне - 3 ячейки. Могу переписать таблицу заново именно для мобильных. Но как это сделать?

Comments

[zkrvndm]

Самый простой вариант, это сделать две таблицы и показывать потом нужную. Вариант посложнее, медиазапросами изменить стили ячеек и флексбоксами сделать все как надо.

[Илья]

Надим Закиров, я и хочу две таблицы, но как показывать нужную?

[Александр Черемхин]

две таблицы, но как показывать нужную?

через css одну скрываете другую показываете. переключение через media

[Илья]

Александр Черемхин, понял, спасибо.

Answer 1

[Владимир Коротенко]

Потаскайте область просмотра, увидите как схлопываются столбцы
https://jsfiddle.net/vkorotenko/juor6waq/

Comments

[poniyur]

я бы лучше через table tr td:nth-of-child(3) и т.д. делал, либо придумывал класс для всей таблицы, который регулировал видимость, чем каждому td давать классы.

[Владимир Коротенко]

poniyur, то же вариант, мой вариант общий и более наглядный.