html - 带有引导选项卡的表

Question

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

所以问题是，如何做到这一点？

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

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

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

Answer 1

Render all columns but hide them (display: none;) except the column by default.

Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think

Answer 2

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

HTH。