J. Doe J. Doe - 4 months ago 25
CSS Question

CSS <td> position fixed shrinks/moves element

Im using GWT. I need to make two columns fixed, to freeze them, and the others should scroll fluently.
Here is simple layout before freezing two first columns (where numbers are indicated and Z column)

enter image description here

After freezing:

enter image description here

As you can see, if freezes correctly I can scroll and two first columns dont move. HOWEVER, A column content goes before Z column and disappears. (I moved Z column to show how A column content hides purple color)

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


Maybe a solution is to use
padding-left
or smt? Please help Im totaly stuck on it.

Answer

You can give the GWT table a class like class="fixed_header" and style the rest via CSS. Your CSS approach seem a little bit complicated I think.

Can you check if this is what you want to achive? A fixed 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/