問題タブ [fixed-header-tables]

親ページからデータ テーブルのコピーをブートストラップ モーダルにロードし、最初にモーダルでテーブルの ID を変更しています。この後、両方のテーブルのデータ テーブルを異なる方法で初期化しています。また、データ テーブル コンストラクター FixedHeader() を使用してヘッダーを固定します。モーダルではなく、親ウィンドウのテーブルでも同じことがうまくいきました。モーダルのテーブルには通常のヘッダーがあり、モーダルのロード中にもう 1 つの固定ヘッダーが親ウィンドウ自体にロードされます。

この問題を解決するには解決策が必要です。

スティッキー テーブル ヘッダーを作成しようとしていますが、問題は、列の幅をベース テーブルの列の幅と一致させることができないことです。

問題は、テーブル内の個々の列に設定した (または設定していない) 幅に関係なく、列の実際の幅がテーブル内のコンテンツに基づいて大きく異なる場合があることです。

私は多くの解決策を試しましたが、これまでで最も成功したのは、テーブル全体 (tbody を含む) を固定位置の div 内にコピーし、固定位置の div でテーブルの tbody 部分の可視性を設定することです非表示に。

そうすることで列幅は同じになりますが、スティッキーテーブルのtbodyが見えないままメインテーブルを覆い隠してしまい、ホバー状態などをメインテーブルに登録できなくなるという問題がありました。

すべての場合に適切な列幅を持つスティッキー テーブル ヘッダーを適切に作成する方法について、誰かアドバイスはありますか? ありがとうございました。

編集：これが私のマークアップの例です：

あいまいで申し訳ありませんが、機密データであるため、実際のデータを表示することはできません。ポイントは、データが非常に多様であり、私が何をしても、列幅を固定/一貫させることができないということです。それらは常に異なります。

現在、ページのレンダリング時に、テーブル全体をスティッキー div 内にコピーしてから、tbody 要素の可視性を に設定していhiddenます。これにより適切な幅が得られますが、メイン テーブルが隠れてしまいます。この場合も、Z インデックスは役に立たないようです。

画面の上部に固定ヘッダーがあり、ヘッダーの後に要素を配置しようとすると、その要素はヘッダーの高さを無視してしまいます。

HTML

CSS

JSFIDDLE

これに似た問題の解決策をStackOverflowやその他の場所で検索しましたが、役に立ちませんでした（特定の問題を言語化するのに苦労したことが一因です）。クリアフィックスを試してみた

しかし、それでもうまくいきません。margin-top: 100pxまた、要素に aを追加しようとしましたpが、将来ヘッダーの高さを変更し、ヘッダーに続くすべての要素または追加する可能性のある他の要素に対してこれを行う必要がある場合の悪い習慣を考えますposition: fixedまたはposition: absolute。_ さらに、ヘッダーは、さまざまなサイズの画面に応じて流動的な高さになります。

現在、私はワイヤーフレームを作成しているので、可能であれば JavaScript を使用せず、単純な CSS のみを使用したいと考えています。そうでない場合は、最小限のバニラ JavaScript で十分です。これは Web デザインの根本的な問題であり、私は常にこれに反論してきましたが、これmargin-topに対抗するためのよりクリーンでより良い方法を誰かが知っているかどうか疑問に思っています。

また、これは少なくともある程度クロスブラウザである必要があります。繰り返しますが、ワイヤーフレームのみです。私のワイヤーフレームは、基本的な CSS をサポートするあらゆるもので機能するはずです。

これが重複した質問である場合は申し訳ありませんが、そうであると確信していますが、私の状況に完全に一致するものは見つかりませんでした. どんな助けでも大歓迎です！

jQuery fixedheadertable プラグインを使用しています。このプラグインを使用すると、ユーザーはテーブルを下にスクロールするたびに静的な位置に留まる固定ヘッダーを持つことができます。私の質問は一般的な js の質問ですが、 .

プラグインを初期化するコードは次のとおりです。

基本的に、私の問題は、私のテーブルでは、ユーザーが選択した設定に基づいて列の数が変わることです。その数が変更されたら、テーブルを正しく表示するために、この関数を再実行する必要があります。主な考え方は、var 'colratioString' には、テーブル内の列の数とまったく同じ量の値が含まれている必要があるということです。これらの数値 (例: 150) は任意に設定できますが、簡単にするために、今はすべて 150 のままにしています。

私が乗り越えようとしているハードルは、colratioString を次のようにする必要がある場合があるという事実です。

そして時々私はそれがこのように見える必要があるかもしれません

等々。

colCnt 値 (これは正しい列数です) を取得し、正しい数の値で colratioString を作成する方法はありますか?

例を次に示します。もしも...

それで

colCnt の値を取得して、必要な正確なフォーマットを含む colratioString 変数を作成する方法に問題があります。

読んでくれてありがとう！

テーブルがウィンドウよりも広く、twitter ブートストラップ 3 cssがページにロードされていて、IE または Firefox でページを表示し ていない限り、必要に応じて正確に機能する固定テーブル ヘッダー スクリプトがあります。

この動作を変更する Twitter ブートストラップ 3 についてはどうですか? これが私がこの時点で持っているものです

角度データテーブルに固定ヘッダープロパティを使用しており、コードは次のようになります

スクロール中にテーブルのヘッダーがページの上部に固定され、すべて正常に機能しました。しかし、データテーブルのヘッダー列とボディ列の間で列の配置の問題に直面しました。

そこで、http://bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/に記載されている解決策を試しましたが、結果は同じままです。

なぜこれが起こるのか理解できませんでした。そのため、固定ヘッダー機能の呼び出しにタイムアウトを与えましたnew $.fn.dataTable.FixedHeader($scope.table);。しかし、結果は再び同じままです。

同じ問題に直面した団体はありますか？

さまざまな結果を試しましたが、通常、ほとんどの場所で水平固定ヘッダーが得られました。

しかし、私はブートストラップ 2 を使用しており、さまざまな動的列を持つテーブルを作成したいので、最初の 3 列をテーブルの垂直ヘッダーとして使用するように修正します。

http://www.fixedheadertable.com/を試してみたので

私は試してみました：

ただし、ヘッダー付きのテーブルを垂直に複製しますが、固定されていないだけでなく、UI が元のデザインで上下にピクセルで壊れます。

しかし、それは私のテーブルで物事を台無しにしています。誰でもそれを助けることができますか？

ヘルプの画像:

ここにフィドルがあります：jsfiddle.net/tysewu52