スティッキー テーブル ヘッダーを作成しようとしていますが、問題は、列の幅をベース テーブルの列の幅と一致させることができないことです。
問題は、テーブル内の個々の列に設定した (または設定していない) 幅に関係なく、列の実際の幅がテーブル内のコンテンツに基づいて大きく異なる場合があることです。
私は多くの解決策を試しましたが、これまでで最も成功したのは、テーブル全体 (tbody を含む) を固定位置の div 内にコピーし、固定位置の div でテーブルの tbody 部分の可視性を設定することです非表示に。
そうすることで列幅は同じになりますが、スティッキーテーブルのtbodyが見えないままメインテーブルを覆い隠してしまい、ホバー状態などをメインテーブルに登録できなくなるという問題がありました。
すべての場合に適切な列幅を持つスティッキー テーブル ヘッダーを適切に作成する方法について、誰かアドバイスはありますか? ありがとうございました。
編集：これが私のマークアップの例です：
<div class="sticky">
</div>
<table>
<thead>
<!-- Headers here. -->
</thead>
<tbody>
<!-- Tons of sensitive data here, so can't display. -->
</tbody>
</table>
あいまいで申し訳ありませんが、機密データであるため、実際のデータを表示することはできません。ポイントは、データが非常に多様であり、私が何をしても、列幅を固定/一貫させることができないということです。それらは常に異なります。
現在、ページのレンダリング時に、テーブル全体をスティッキー div 内にコピーしてから、tbody 要素の可視性を に設定していhiddenます。これにより適切な幅が得られますが、メイン テーブルが隠れてしまいます。この場合も、Z インデックスは役に立たないようです。