CSS <td> Position fixiert schrumpft/bewegt Element

Question

Im mit GWT. Ich muss zwei Spalten fixieren, um sie einzufrieren, und die anderen sollten fließend scrollen. ist hier einfaches Layout vor zwei ersten Spalten Einfrieren (wo Zahlen angegeben sind und Z-Säule)

Nach dem Einfrieren:

Wie Sie sehen können, wenn gefriert richtig kann ich Scroll und zwei erste Spalten bewegen sich nicht. Ein Spalteninhalt geht jedoch vor die Z-Spalte und verschwindet. (I bewegt Z-Spalte zu zeigen, wie eine Spalte Inhalt versteckt lila Farbe)

Meine 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; 
} 

Vielleicht eine Lösung padding-left oder smt benutzen? Bitte helfen Sie mir, dass ich total feststecke.

Answer 1

Sie können der GWT-Tabelle eine Klasse wie class="fixed_header" geben und den Rest über CSS formatieren. Ihr CSS-Ansatz scheint ein wenig kompliziert zu sein, denke ich.

Können Sie überprüfen, ob dies das ist, was Sie erreichen möchten? Ein fester Header. 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/