Таблица с вкладками Bootstrap

Question

Я пытаюсь создать таблицу, которая должна содержать несколько столбцов с основными фактами слева и справа, должны быть некоторые столбцы, которые можно вставить в закладки. Что-то вроде этого:

Так что вопрос в том, как это сделать?

я мог персонально думать о двух решений, но я на самом деле не нравится, как:

• Написать собственную таблицу для Tab1, Таб2 ... Это содержит основные данные и данные вкладками
• Напишите таблицу для основных данных и по одной для каждой вкладки. Здесь я думаю, что у вас будет много проблем с дизайном, «склеивая» обе таблицы вместе, чтобы они выглядели как одна таблица.

Так что фактически мне не нравятся оба решения. Может быть, есть лучшее решение?

Answer 1

Возможно, вы могли бы предоставить столбцам, принадлежащим каждой вкладке, свой собственный уникальный класс, например. .tab1-columns, .tab2-columns и т. Д. Затем вы можете отобразить или скрыть столбец в зависимости от активной вкладки. Однако вкладки будут существовать вне таблицы. В качестве альтернативы вы можете pt вкладки в строку псевдо-заголовка над фактической строкой заголовка таблицы, причем первая ячейка заголовка охватывает эти ячейки, которые не должны быть «вставлены в закладки». Тем не менее, я считаю, что оставлять вкладки вне таблицы будет немного более семантическим по своей природе.

HTH.

Answer 2

Извлеките все столбцы, но спрячьте их (display: none;), за исключением столбца по умолчанию.

Затем добавьте на вкладках событие click, чтобы переключить видимые столбцы. обязательно используйте только nav-tabs, а не js component .. будет проще, я думаю