固定ヘッダーが幅プロパティを継承できるようにする

Question

固定ヘッダー行を持つテーブルがあります。固定を無効にすると、幅自体が正しく配置されますが、固定されていないため、コンテナdivからスクロールします。固定値がプロパティに追加されると、正しくスクロールされますが、幅は整列しません。この与えられたシナリオでは、この '固定'プロパティを使用しながら幅を整列させることは可能ですか？

.container { 
 
     border: 1px solid black; 
 
     height: 100px; 
 
     overflow-y: scroll; 
 
    } 
 
    td { 
 
     font-size: 40px; 
 
    } 
 
    table { 
 
     table-layout: fixed; 
 
     height: 100%; 
 
    } 
 
    thead{ 
 
     position:fixed; 
 
    }

<div class="container"> 
 
    <table> 
 
     <thead> 
 
      <tr> 
 
       <th> 
 
        header 
 
       </th> 
 
       <th> 
 
        header 
 
       </th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

jsFiddle：https://jsfiddle.net/meeow314159/3vs9bmsf/2/

Answer 1

ありません、それは不可能です。それは要素のためのスペースを残していないので、そのためには、要素のためのスペースを残さないでください

を固定MDN

によると継承width

を持っていません。代わりに、画面のビューポートに対して指定された位置に配置し、スクロールすると を移動しないでください。印刷するときは、すべてのページの の固定位置に配置します。この値は、常に新しいスタッキングコンテキストを作成します。

specs

固定位置についてを参照してください。