幅を変更して位置を固定しないようにする：fixed

Question

タイトルで私の質問を徹底的に説明するのは難しかったので、私はその説明を明確にしようとします。 <div>を使ってテーブルを構築し、意味<table>を意図的に避けてCSSのプロパティdisplay: tableなどを適用しています。 すべて問題なく動作していますが、現在はposition: fixedを使用して固定ヘッダーを達成しようとしています。結果は次のとおりです。

Obliviouslyセルの残りの部分に適用されるdisplay: table-cellこのdesideratedない振る舞いを引き起こしています。セルは新しいコンテンツに適合し、CSSファイルに適用されたルールmin-width: 100pxに従うだけで自動リサイズされます。ここで

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

ヘッダと、純粋なCSSのアプローチと「体」は、細胞間の完全な位置合わせを達成するための方法はありますか？私はJSで幅を再計算しようとすることができましたが、これを実現するためのエレガントな方法があると確信しています。コードの下

：

HTML

<!-- Row Container --> 
    <div class="row-container" id="row1"> 

     <!-- Header cell container --> 
     <div class="cell cell-header" id="cell1"> 

     <!-- Cell content container --> 
     <div class="cell-content"> 
      <span>Cell</span> 
     </div> 
     </div> 

     <div class="cell cell-header" id="cell2"> 
     <div class="cell-content"> 
      <span>Cell</span> 
     </div> 
     </div> 

     <div class="cell cell-header" id="cell3"> 
     <div class="cell-content"> 
      <span>Cell</span> 
     </div> 
     </div> 

     <div class="cell cell-header" id="cell4"> 
     <div class="cell-content"> 
      <span>Cell</span> 
     </div> 
     </div> 

     <div class="cell cell-header" id="cell5"> 
     <div class="cell-content"> 
      <span>Cell</span> 
     </div> 
    </div> 

CSS

#row1 { 
    position: fixed; 
} 

私は完全なコードについて先に掲載のペンに見てみてください。私は彼の全身にそれを投稿することは良い考えであるか分からない。