0

左側に基本的な事実を持ついくつかの列を含むテーブルを作成しようとしています。右側には、タブを付けることができるいくつかの列があります。このようなもの：

ここに画像の説明を入力

質問は、これを行う方法ですか？

個人的には 2 つの解決策を考えることができますが、実際にはどちらも好きではありません。

  • Tab1、Tab2 の独自のテーブルを作成する ... 基本データとタブ付きデータを含む
  • 基本データ用のテーブルと各タブ用のテーブルを作成します。ここで、両方のテーブルを「接着」することで多くの設計上の問題が発生すると思います。そのため、それらは 1 つのテーブルのように見えます。

したがって、実際には両方のソリューションが好きではありません。多分これに対するより良い解決策がありますか？

4

2 に答える 2

1

おそらく、各タブに属する列に固有のクラス ( 、 など) を与えることが.tab1-columnsでき.tab2-columnsます。その後、アクティブなタブに応じて列を表示または非表示にすることができます。ただし、タブはテーブルの外に存在します。または、タブを実際のテーブル ヘッダー行の上にある疑似ヘッダー行に配置し、最初のヘッダー セルが「タブ」ではないセルにまたがるようにすることもできます。ただし、タブをテーブルの外に置いておくと、本質的にもう少しセマンティックになると思います。

HTH。

于 2013-08-08T12:54:31.050 に答える
1

すべての列をレンダリングしますがdisplay: none;、デフォルトで列を除いて非表示 ( ) にします。

次に、タブにイベントを追加しclickて、表示される列を切り替えます。jsコンポーネントではなくnav-tabsのみを使用してください..簡単になると思います

于 2013-08-08T12:58:27.520 に答える