부트 스트랩 탭이있는 테이블

Question

왼쪽에 기본 사실이있는 일부 열을 포함하는 테이블을 만들려고합니다. 오른쪽에는 탭으로 만들 수있는 일부 열이 있어야합니다. 이런 식으로 뭔가가 :

그래서 질문이 어떻게 할 수 있나요?

내가 personaly이 개 솔루션 생각할 수 있지만 실제로 모두 좋아하지 않는다 :

• 는 TAB1에 대한 자신의 표를 쓰기는 TAB2는 ... 즉, 기본 데이터와 탭 데이터
• 을 포함 기본 데이터에 대한 표와 각 표에 대한 표를 작성하십시오. 여기에서는 두 테이블을 함께 묶는 "디자인"문제가 많아 하나의 테이블처럼 보일 것이라고 생각합니다.

사실 두 솔루션을 좋아하지 않습니다. 어쩌면 거기에 더 좋은 해결책이 있을까요?

Answer 1

아마도 각 탭에 속한 열에 고유 한 클래스를 부여 할 수 있습니다. .tab1-columns, .tab2-columns 등입니다. 그런 다음 활성 탭에 따라 열을 표시하거나 숨길 수 있습니다. 그러나 탭은 테이블 외부에 존재합니다. 또는 탭을 실제 탭 머리글 행 위의 의사 머리글 행에 삽입하고 첫 번째 머리글 셀을 "탭"하지 않아야하는 셀에 걸쳐 놓습니다. 그러나 테이블 외부에 탭을 두는 것이 본질적으로 조금 더 의미가 있다고 생각합니다.

HTH.

Answer 2

모든 열을 렌더링하지만 기본적으로 열을 제외한 모든 열을 숨 깁니다 (display: none;).

그런 다음 표시된 열을 전환하려면 탭에 click 이벤트를 추가하십시오. nav-tabs이 아닌 js component을 사용해야합니다. 더 쉽게 생각할 수 있습니다.