ページに 2 つの Html テーブルを並べてレイアウトしようとしています。左側のポートフォリオ ID をクリックすると、右側に取引貢献度の記録が表示されます。
個別の div を使用して、列ヘッダーをロックするヘッダー テーブルを作成し、その下にデータを含む別のスクロール可能なテーブルを作成します。
サンプルを参照してください: http://jsfiddle.net/robertmazzo/6zWdP/1/
詳細：
ページの 1 つのメイン div - ページ内の 4 つの div:
1)左にフロートする 2 つの div
1a)最初の div はヘッダーとヘッダーのみのテーブル<caption>です2a )<thead> 2 番目の div はスクロール可能で、ヘッダーなしの完全なテーブル セルの内容を含みます<th>
2)右にフロートする 2 つの div
1a)上記と同じ
2a)上記と同じ
ご覧のとおり、左側のポートフォリオ定義の div とテーブルは見栄えがよく、きれいに見えます。
ただし、Trade Contrib の div と右側の表は少し歪んでいます。
参考までに、テーブルの列ヘッダーに個別の div を使用するこの手法がなければ、2 つのテーブルを並べて見栄えがよくなります。ただし、ロックされたヘッダー列の外観はありません。ex/ http://jsfiddle.net/robertmazzo/bsApv/3/
私は実験を続けますが、いくつかの指示とアドバイスをいただければ幸いです。