CSS​​position fixed shrinks/moves element

Question

使用GWT的Im。我需要固定兩列，以凍結它們，其他人應該流利地滾動。 下面是簡單的佈局凍結兩個第一列（其中數字表示和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

您可以給GWT表一個像class="fixed_header"這樣的類，並通過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/