CSS位置固定收缩/移动元素

Question

我正在使用GWT。我需要修复两个列，以冻结它们，其他列应该流畅地滚动。 这是在冻结两个第一列（其中指示数字和Z列）之前的简单布局

冻结后：

正如你所看到的，如果正确冻结我可以滚动并且两个第一列不移动。但是，列内容在Z列之前消失并消失。 （我移动Z列以显示A列内容如何隐藏紫色）

我的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/