Question

我有一个带有HTML表和一些CSS的页面。当我在 Firefox （64位v66.0.5版）中显示该页面时，该页面通常可以正常工作，页眉像预期的那样贴在顶部，而第一列贴在左侧。但是，当我缩小浏览器窗口的宽度以使页面具有水平滚动条时，我无法弄清楚如何使tr的{{1}}标签在水平滚动时不会向左滚动

当我使用 JSFiddle 在Firefox中运行相同的代码时，无法从我自己的HTML和CSS文件中正常运行。唯一贴在顶部的标题是带有列标题的主要标题，其他标题则不贴在顶部。但是，第一列确实留在左侧。这是JSFiddle上的页面：

https://jsfiddle.net/samlalani/nswoz9rp/8/

在MacOS上的 Safari 上也会发生相同的问题。

在 Chrome （v74.0.3729.131 64位）中，水平滚动时第一列停留在左侧，但垂直滚动并不会粘附 any 标头在顶部。

我一直在Internet上进行搜索（包括在 stackoverflow 上），试图弄清楚如何使该页面在Firefox 和 Chrome上都能正常运行。而且，没有水平滚动时如何使colspan与tr不滚动到屏幕左侧的示例。任何帮助将不胜感激。

这是我正在使用的代码：

colspan

.scrollingtable {
  position: absolute;
  width: 80%;
  height: 80%;
  z-index: 2;
  margin: auto;
  top: 20;
}

.mytable {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 1000px;
  min-width: 850px;
  left: 0;
}

.nameheader {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  z-index: 2;
  background: #000;
  color: #FFF;
}

.name {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  z-index: 2;
  background: #FFF;
  color: #000;
}

.date {
  width: 65;
}

.city {
  width: 80px;
}

.state {
  width: 30px;
}

.mytable td {
  border: 1px solid #000;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 1;
}

.mytitle {
  position: -webkit-sticky;
  position: sticky;
  height: 50;
  top: 0;
  left: 0;
  color: white;
  background-color: black;
  z-index: 5;
}

.subtitle {
  position: -webkit-sticky;
  position: sticky;
  height: 20;
  top: 50;
  left: 0;
  color: white;
  background-color: #555;
  z-index: 4;
}

.subtitle2 {
  position: -webkit-sticky;
  position: sticky;
  height: 20;
  top: 70;
  left: 0;
  color: black;
  background-color: #AAA;
  z-index: 3;
}

Answer 1

显然，在Chrome上，如果将 position：sticky 样式附加到 tr 标记上，则无法使用，但如果将其附加到 th 或 td 。在Firefox中，样式确实附加到 tr 上即可起作用。

Firefox / Chrome兼容性：具有固定标题和列的HTML表

1 个答案: