CSS <td> 位置固定缩小/移动元素答案

【问题标题】：CSS <td> position fixed shrinks/moves elementCSS <td> 位置固定缩小/移动元素
【发布时间】：2016-08-03 11:41:53
【问题描述】：

我正在使用 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？请帮助我完全坚持下去。

【问题讨论】：

请提供一些代码（不仅仅是 CSS）。我看不懂你的两张 excel 图片。

标签： css gwt repository

【解决方案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/

【讨论】：