CSS <td> 위치 고정 축소/이동 요소

Question

임 GWT를 사용합니다. 고정하려면 두 개의 열을 고정해야하며 다른 열은 유창하게 스크롤해야합니다. 다음은 동결 후 (번호가 표시 및 Z 열된다)이 처음으로 열

을 동결하기 전에 간단한 레이아웃입니다 :

당신이 볼 수 있듯이, 제대로 정지하면 내가 할 수있는 스크롤 및 두 개의 첫 번째 열은 움직이지 않습니다. 그러나 열 내용이 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/