CSS <td> 固定位置 shrinks/moves 元素

Question

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

冻结后：

如您所见，如果正确冻结，我可以滚动并且前两列不会移动。但是，A 列内容位于 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 table 一个像 class="fixed_header" 一样的 class 并通过 CSS 设置其余的样式。我认为您的 CSS 方法似乎有点复杂。

你能检查一下这是否是你想要实现的目标吗？一个固定的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/

CSS <td> 固定位置 shrinks/moves 元素

CSS <td> position fixed shrinks/moves element

css

gwt

repository