CSS​​位置固定縮小/移動要素

Question

私はGWTを使用しています。私は2つの列を固定し、それらをフリーズさせ、他の列は滑らかにスクロールする必要があります。 はここで凍結後（数字が示され、Z列されている）は、2つの最初の列

を凍結する前に、シンプルなレイアウトです：

あなたが見ることができるように、正しくフリーズした場合、私がすることができます2つの最初の列は移動しません。しかし、列の内容はZ列の前に進み、消えます。 （私は、列の内容が紫色を隠す方法を示すためにZ列を移動）

マイCSS：

//for number column 
tr.Row td.row1 { 
    border-color: #ffffff; 
    position : fixed; 
    height : 119px; 
    left : 344px; 
    overflow-y: auto; 
} 
// for Z COLUMN 
.lockHead{ 
    position: fixed; 
    z-index:1!important; 
} 

はたぶんソリューションがpadding-leftやSMTを使用することですか？それを全面的に支えてください。

Answer 1

class="fixed_header"のようなクラスをGWTテーブルに与え、残りの部分をCSSでスタイルすることができます。あなたのCSSのアプローチは少し複雑に思えます。

これはあなたが達成したいものかどうか確認できますか？固定ヘッダー。 CSS：

.fixed_header { 
    table-layout: fixed; 
    border-collapse: collapse; 
} 

.fixed_header td:nth-child(1), th:nth-child(1){ 
    min-width: 100px; 
} 

.fixed_header thead tr { 
    display: block; 
    position: relative; 
} 

.fixed_header tbody { 
    height: 60px; 
    display: block; 
    overflow: auto; 
} 

https://jsfiddle.net/ghsroh81/