問題タブ [fixed-header-tables]

固定ヘッダーを持つテーブルを作成するのに最適な jQuery プラグインは何ですか? クロスブラウザ互換である必要があります。データグリッドウィジェットを作成するためにこれが必要です。

何度も質問されてきましたが、この特定の問題に対して満足のいくものは見つかりませんでした。可能な解決策を見つけましたが、垂直スクロール バーを画面の左側に移動する必要があります。理想的ではありませんが、私の特定のケースではうまく機能します。私の残りの要件を満たす特定の解決策がない限り、これが悪い考えであるというコメントはありません.

私の問題の詳細は次のとおりです。

• HTML / CSS のみ - 大量のデータがあり、JavaScript のスクロールが遅すぎて反応しません。Javascript は、すべてのデータ行を操作しない限り、1 回限りの書式設定操作に使用できます。
• ヘッダーが固定されたまま、行を上下にスクロールできる必要があります。
• 各列の幅は固定する必要があります
• 垂直および水平スクロール バーが表示される必要があります

問題の例: このテーブルは、水平方向にスクロールしないと垂直スクロール バーが表示されないという 1 つの問題を除いて、私が必要とするすべてのことを行います。

現在の解決策：これで特定の問題は解決しますが、すべての人に役立つとは思いません。より良い解決策はありますか？

したがって、これは何よりもCSSの問題だと思いますが、基本的に、私が提供したHTMLには、リアクティブレイアウトの固定ヘッダーテーブルが含まれています。
コード： http： //jsfiddle.net/JpRQh/10/

3行のデータがありますが、IE9では、テーブルの行が非常に高く、スクロールバーが無効になっているようです。

固定ヘッダーテーブルで行った例：http： //www.imaputz.com/cssStuff/bigFourVersion.html でもIE9でも同じ問題が発生します。

それを修正する方法について何かアイデアはありますか？

編集：十分なデータがある場合は、テーブルがスクロールすることを約束します。しかし、たとえば3行しか含めませんでした。

概念は単純に思えます: ヘッダーをテーブル A に分割し、実際のデータをテーブル B に分割することで、固定ヘッダー スクロールを実装しようとしています。

ただし、列の数によっては、ブラウザーが列幅を計算すると、1 または 2 ピクセル短くなったり長すぎたりして、テーブルが整列していないように見えるという奇妙なレンダリングの問題が発生します。

質問: これらのオフ 1/2 ピクセル レンダリングの問題を引き起こしている原因は何ですか? このアプローチを使用して幅を保証できますか?

編集しやすいように、コードを jsfiddle に配置しました。

http://jsfiddle.net/hwm6q/4/

編集：

この修正は、Grid コントロールの作成に適用する範囲内で機能する必要があることに注意してください (投稿した例の単なるハック修正ではありません)。

http://dev.driz.co.uk/table.htmlで、固定ヘッダーテーブル（オンラインで多くのプラグインを見てきましたが、PURELY CSSを使用して自分で実行したい）を試しています。

ただし、2つの問題があります。

1. ヘッダーはテーブルの幅を拡大せず、下のテーブル行と同期しなくなります。これを修正するにはどうすればよいですか？

2. テーブルの周囲とテーブルのセルの周囲に境界線を配置したため、一部の場所で二重の境界線ができてしまいました。どうすればこれを回避できますか？セルが常に画面に表示されるとは限らず、テーブルの周囲にボックスを提供するために信頼できるとは限らないため、テーブルに境界線を付ける必要があります。

誰かが助けてくれるなら、それは大いにありがたいです。

私はあちこちを探してみましたが、私の問題に対する良い解決策を見つけることができませんでした。テーブルの残りの部分をスクロールしている間、固定ヘッダーが残るテーブルを作成しようとしています。問題は、ページウィンドウが調整されたときに位置合わせできるようにすることです。私は固定ヘッダーを取得することができ、ウィンドウを調整するときに列を整列させることができましたが、両方を一緒に機能させることができませんでした。これを実行できるスクリプトはありますか？私はfixedheadertablejquery、flexigrid、fixed-header-coffee、chromatable、floatyheadを試しました。これらのどれも私が探している解決策を私に与えることができませんでした。何か間違ったことをしているのかもしれませんが、theader、tbodyなどを使用した従来のテーブルがあります。テーブルを2つのテーブルに分割することは避けたいです。

助けてください！

データテーブルに固定ヘッダー機能を追加しようとしています。

次のステートメントを追加しました。new FixedHeader( oTable);

元のヘッダーの上にフローティング ヘッダーが作成されました。ヘッダーの背景は透明で、既存のヘッダーとはフォントとスタイルが異なります。フローティング ヘッダーが現在のヘッダーに重なっていると、非常に奇妙に見えます。

CSS コード:

ページを下に移動するときにテーブルヘッダーを修正しようとしています。問題はIE7にあり、theadは絶対的なものではありませんが、「正しい」位置に表示されています。テーブルの上を飛ぶ必要があります。Firefox11で完璧に動作します

私は次のようなテーブル構造を持っています：

CSS

JQuery

テーブルがあり、ヘッダーを修正したい...

このリンクの例に基づいて、私は次のことを行いました。

しかし、それは機能していません...

では、これで何が間違っている可能性がありますか？

私はあなたがそれが機能するような方法でコードを変更することを願っています...

CSSファイル：

繰り返しになりますが、これについては IE7 で途方に暮れています。

ほぼ完全に CSS に基づいて、固定ヘッダーのスクロール可能なボディ テーブルを作成しています (水平スクロールを機能させるには、JavaScript が必要です)。これ を もと に 改変 し たもの。私がチェックしたブラウザではうまく見えます: Chrome、Firefox、IE8+。ただし、IE7 (およびおそらくそれ以下) では、いたずらな黒い羊のようにヘッダーが誤動作し、その理由がわかりません。

修正/改善/提案/変更は高く評価され、奨励されます。:)
(私は窓風の外観を目指していました)

ここにライブjsFiddleがあります

Firefox と IE7 の比較画像です。