Как сверстать таблицу со вкладками

[Светлана Г.]

Здравствуйте! Нужно принять решение, как правильно это сверстать.

Есть такое задание:

 

Каждый месяц - это вкладка. Соответственно, под ней отображается относящееся к ней содержимое.

Верстка должна быть адаптивной.

 

Правильно ли сверстать это таблицей?

[satantx]

А как именно адаптивной? покажите картинку при минимальном разрешении?

Но лучше всего да, таблицей. Просто разбить на 12 блоков и переключать их.

Сверху такая же таблица будет, только постоянно наверху

[Светлана Г.]

Адаптивного варианта не нарисовано, к сожалению.

Обычно, у нас, это на усмотрение верстальщика.

Т.е. будет общая таблица, а в ней еще? Я думала синие вкладки сделать просто дивами в одной ячейке.

 

Просто разбить на 12 блоков и переключать их. Сверху такая же таблица будет, только постоянно наверху

А можно поподробнее об этом, пожалуйста?

Edited March 13, 2015 by Светлана Г.

[satantx]

Типичный дизайнер) 100% про вёрстку ничего не знает.

Верстайте как и хотели - таблицами, только смотрите, всё поедет при адаптивности (шапка тому пример будет)

[Светлана Г.]

 На узком экране из шапки будет удален текст, останутся только пиктограммы.

Меня волнует вопрос, как объединить содержимое вкладки.

[satantx]

Ну норм тогда, удачи)

[Светлана Г.]

Но лучше всего да, таблицей. Просто разбить на 12 блоков и переключать их. Сверху такая же таблица будет, только постоянно наверху

 

Можно поподробнее, пожалуйста.

[satantx]

[Светлана Г.]

Спасибо огромное!

 

То, что внизу отдельным блоком и отдельной таблицей делаю так?

<div><table></table></div>

 

И всего их 12 штук.

Edited March 13, 2015 by Светлана Г.

[satantx]

http://jsfiddle.net/ekqj3vht/

[Светлана Г.]

Пока я вот что сделала:

Никак ссылка не вставляется нужная!

http://jsfiddle.net/ekqj3vht/2/

 

За скрипт отдельное спасибо!

Edited March 13, 2015 by Светлана Г.

[Светлана Г.]

Вот так у меня: http://jsfiddle.net/ekqj3vht/5/

 

Как мне теперь объединить содержимое каждой вкладки, чтобы можно было обратиться именно к ней?

 

Хотела поместить в отдельную таблицу, но никак не получается это сделать. Таблица становится независимой от общей.

Edited March 13, 2015 by Светлана Г.

[satantx]

Нет, не так.

У вас будет 12 таблиц. Каждая таблица в своём диве .pane

[Светлана Г.]

И все 12 таблиц должны находиться в одной общей?

[Q4Dizzy]

А версия ие минимальная какая?

[Светлана Г.]

Сделала все в одной таблице. Для каждой вкладки - свой <tbody>.

А версия ие минимальная какая?

IE9.

[Q4Dizzy]

Можно и так.. не знаю, подойдёт такой вариант.. http://jsfiddle.net/ekqj3vht/6/

[Светлана Г.]

Можно и так.. не знаю, подойдёт такой вариант.. http://jsfiddle.net/ekqj3vht/6/

Да, я так и сделала - поместила каждую вкладку в tbody.

Спасибо!

[Светлана Г.]

А вот теперь встал вопрос сделать эту таблицу адаптивной. Можете что-нибудь посоветовать?

 

Я использовала раньше такой способ:

https://css-tricks.com/responsive-data-tables/

 

Но он не подходит из-за присутствия rowspan.