テーブルの列を複数の列をスクロール可能にする方法を角度2で固定しますか？

Question

私はテーブルの左側に常に必要な3つの列と、各グリッド要素が1日1時間を表すグリッドを含む列を含むため、その列をスクロール可能にする必要があります。私は多くの提案された解決策を試しましたが、彼らのほとんどはポジションアブソリュートを使用しています。これは悪い冗談です。列の高さが変化すると、それらの絶対的な位置は従わない。もう1つの問題は、テーブルが角2のコンポーネントが少なくて済むことです。単純なhtmlだけではなく、難しくなります。ポジションアブソリュートを使用するよりも優れたソリューションはありますか？

Answer 1

さて、最後に私は、このソリューションで行きました： Fix and Scrollable table structure using html div

それはまだ絶対的な列を使用していますので、固定幅とマージンが、よく私がいる限り、それは作品としてのことを生きることができます。テーブルの行を表すAngularコンポーネント要素について、私はちょうどdisplay: table-rowを与えて、単にtdタグを内部に入れました。したがって、もはやtrを使う必要はありません。

Answer 2

多分お試しくださいposition: sticky;しかし、コードなしでは、問題がどこにあるのか分かりません。

Answer 3

私はこのアプローチをとった。私は垂直方向と水平方向に作業します。

https://plnkr.co/edit/MWFJuiWsUoo39xbCwAKI?p=preview

onScrollA($evt) { 
    this.divC.nativeElement.scrollLeft = evt.srcElement.scrollLeft; 
}