MaterializeCss固定ヘッドと整列したカラムの内容を持つテーブル

Question

固定ヘッドを使用してテーブルを取得しようとしていて、残りのボディをスクロール可能にしようとしています。私はそれをmaterializeCss Tableで行う必要があります。

私はこれを達成することができ、私はそうやった、しかし、すべてのソリューション、それは別の文字と表の列が整列していないことになりんので、この画像を確認：あなたができるよう

この1つは国境を持っています（scrollクラスがテーブルにある）これは言っ結果は私が使用しているCSSで、生産

：問題を参照してください

.scroll { 
    border: 0; 
    border-collapse: collapse; 
}  
.scroll tr { 
    display: flex; 
}  
.scroll td { 
    flex: 1 auto; 
}  
.scroll thead tr:after { 
    overflow-y: scroll; 
    visibility: hidden; 
    height: 0; 
}  
.scroll thead th { 
    flex: 1 auto; 
    display: block; 
}  
.scroll tbody { 
    display: block; 
    overflow-y: auto; 
    height: calc(80vh - 100px); 
} 

私の質問：列でコンテンツを固定ヘッドで整列させてマテリアライズする方法は？

Answer 1

基本的に私と同じCSSを使用している場合は、flex: 1 auto;のプロパティをflex: 1;に置き換えて（完全に整列させて）、それを理解しました。あなたは完全に身体に整列するヘッドが必要な場合は

---

さらに、（スクロールバーに、ちょうど合致するthead tr{}スクロールバーの幅にpadding-rightプロパティを追加するため小さなオフセットがあるでしょう）