javascript - フローティング テーブル ヘッダーのスタイリング

Question

ここで利用可能な JavaScript/jQuery スクリプトを使用して、スクロール ダウン/アップ中にテーブル ヘッダーをフローティングさせています。私のテーブルは中央揃えです。下にスクロールすると、ヘッダーが浮きますが、左揃えになりますが、テーブルの残りの部分は中央揃えになります。これは、現在取得している出力のスナップショットです。

この JavaScript/jQuery コードまたは PHP/HTML コードを中央揃えにするには、正確に何を編集する必要がありますか?

アップデート

問題の例

Answer 1

これはあなたが見つけた最もエレガントなスクリプトではないので、yaponyal のアドバイスは正しいと思います。

フィドルが機能しなかった理由はいくつかあります: jsfiddle は、スクリプトの直接の onload イベントの添付ファイルを好まないため、次のように変更できます。

window.addEvent("domready", function() {
    this.build_header();
});

さらに、スクロールするたびに実行される setheader 関数は、ヘッダーの水平位置も設定する必要があります。

this.header.style.left = this.table_obj.offsetLeft + "px";

自動でセンタリングできない理由はこちらをご覧ください。必要に応じて、代わりにスクリプトを変更して、複製されたテーブル ヘッダーを中央揃えのテキスト配置で div に配置することもできます。

また、スクリプトは「px」を追加せずにヘッダーのトップ値を設定します。それは私のブラウザでは機能しませんでした。次のように変更する必要がありました。

this.header.style.top=Math.round(screenpos) + "px";

http://jsfiddle.net/VHaaw/3/

Answer 2

ページの読み込み時に、ヘッダーが一番上に表示されますか? その場合は、ヘッダーを別の div にデタッチし、必要に応じてスタイルを設定してから、div に固定された位置を設定することをお勧めします。css プロパティ margin: 0 auto; を使用できます。ページの幅に合わせてデータを中央揃えにします。