2つのテーブルの列幅を同じにする

私が下にスクロールするときにヘッダーが固定されたテーブル構造を実装しようとしています。私はこの目的のために2つのテーブルを使用しました。最初の表にはヘッダー値があり、2番目の表には対応するデータがあります（各列のデータ長は、データが動的に取り込まれるにつれて変化します）。問題は、ヘッダーの幅とデータの列の幅が正確に一致していないことです。、以下に示すように私は動的に列幅2つのテーブルの列幅を同じにする

$('#tdCheckAllBody').width($('#tdCheckAllHead').width()); 
$('#tdLoginBody').width($('#tdLoginHead').width()); 
$('#tdStatusBody').width($('#tdStatusHead').width()); 
$('#tdFNameBody').width($('#tdFNameHead').width()); 
$('#tdLNameBody').width($('#tdLNameHead').width()); 
$('#tdCompBody').width($('#tdCompHead').width());

を変更する。しかし、正しく動作するように見えるdoesntのいくつかのコードを書かれています。どんな助けもありがたい。

出典

2012-02-15 user1211259

このパラメータが最小幅であるため、これは機能しません。いくつかの行では幅が大きくなる可能性があり、残りの部分はすべて影響を受けます。 – Aristos

はい..しかし、あなたはこの問題を解決する方法について何か考えていますか？ – user1211259

あなたはdiv内にdivを置くことができます。div内にdivを配置して、divを展開したり、そのようなものをカットしたりすることができます。場合によっては、幅がデータ幅よりも小さい場合、2つのテーブルの幅を同じにすることは難しいです。あなたがオンラインページを持っているなら、私はあなたの問題の多くを見るかもしれません。 – Aristos

このメソッドを使用し、このための作業フィドル作成さ $(window).scroll(function(){ $("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()}); });

出典

2012-02-15 12:33:36 Prabhavith

：あなたのケースが異なる場合、あなたはlitleを微調整する必要があるかもしれませんOffcourse http://jsfiddle.net/terjeto/dx7H5/

を。私の意見では、テーブルが動的または％幅を使用し、約18pxを占める "auto"スクロールバーに対処し、テーブルに水平スクロールバーが必要な場合はonscrollイベントを必要とするものを複雑にします。

reset-cssコードが不足しているため、あなたのexmpleが正確ではないかもしれませんか？私はこれを使用します：http://developer.yahoo.com/yui/reset/

出典

2012-02-15 12:39:03 terjeto

しかし問題は、ウィンドウのサイズを変更すると、すべてのアライメントの変更...とか、％widthと "auto"スクロールバーの問題があるのです。 – user1211259

Ok。 IC。これは簡単な答えではないでしょうか。私のアプリは複雑な較正アルゴリズム（onresizeとonscroll）を使って表のセルが見出し（www.symphonical.com）とインラインであることを確認します。しかし、そのようなテクニックはケースごとに大きく異なります。現実的なコンテンツとレイアウトを持つフィーリングの例を挙げると、私は助けてくれるかもしれません。 – terjeto

2つのテーブルの列幅を同じにする

答えて

関連する問題