問題タブ [fixed-header-tables]

私の質問をタイトルで網羅的に説明するのは難しかったので、説明をより明確にしようと思います。セマンティックなアプローチを意図的に避けて<div>、CSS プロパティなどを使用および適用してテーブルを作成します。すべてが正常に機能しており、現在、を使用して固定ヘッダーを実現しようとしています。結果は次のとおりです。display: table<table>position: fixed

当然のdisplay: table-cellことながら、セルの残りの部分に適用されると、この望ましくない動作が引き起こされます。セルは新しいコンテンツに合わせて自動サイズ変更min-width: 100pxされ、CSS ファイルに適用したルールに従っています。

作業中のペンへのリンク: https://codepen.io/l_core/pen/ZLQEjq

純粋な CSS アプローチを使用して、ヘッダーと「本文」セルを完全に揃える方法はありますか? JS を使用して幅を再計算することもできますが、これを実現するための洗練された方法があると確信しており、ここで専門家にその方法を尋ねたいと思います。

コードの下:

HTML

CSS

完全なコードについては、上に投稿したペンをご覧ください。彼の全編を投稿するのが良い考えかどうかはわかりません。

ヘッダーが固定されたテーブルを作成しようとしていますが、列はサイズ変更可能でなければなりません。

しかし、サイズを変更しようとするたびに、正確に整列するわけではありません。それはクロムでもっと壊れます。

参照元 -ヘッダーが固定されたサイズ変更可能な列テーブル

ページの読み込み時 -

しかし、列のサイズを変更しようとすると -

フォローインは私のページです -

contenteditable='true' の td 列を持つテーブルがあります。フィールドが編集されると、その列が広くなる場合があります。コンテンツの水平スクロールと垂直スクロールを備えた固定ヘッダーテーブルが必要です。多くの固定ヘッダー プラグインを試しましたが、役に立ちませんでした。

JSFミドルリンク:

JSFドル

HTML:

CSS:

助けが必要です！