表与Bootstrap选项卡

Question

我正在尝试创建一个表，其中包含一些左侧和右侧的基本事实列，应该有一些可以选项卡的列。像这样：

所以问题是，怎么做？

我可以个人想到两个解决方案，但实际上我不喜欢这两个：

• 为Tab1，Tab2编写一个自己的表...包含基本数据和选项卡数据
• 为基本数据编写一个表，为每个选项卡编写一个表。在这里，我认为你会将很多设计问题“粘合”在一起，因此它们看起来像一张桌子。

所以实际上我并不喜欢这两种解决方案。也许有更好的解决方案吗？

Answer 1

也许您可以将属于每个标签的列赋予其自己的唯一类，例如.tab1-columns，.tab2-columns等。然后，您可以根据活动标签显示或隐藏列。但是，选项卡将存在于表外。或者，您可以将选项卡放入实际表标题行上方的伪标题行，第一个标题单元格跨越那些不应“标记”的单元格。但是，我相信将表格留在表格外面会更具语义性。

HTH。

Answer 2

渲染所有列，但默认情况下隐藏它们（display: none;）除外。

然后在选项卡上添加click事件以切换可见列。一定要使用nav-tabs而不是js component ..我认为会更容易