当我添加 css 以将 table 保持在页面边界内时，HTML table 粘性列和行停止工作

Question

我有一个大的 table，它在水平和垂直方向上滚动，第一列为粘性，三个 header 行为粘性。这在一定程度上起作用。但是 table 超出了屏幕的右侧。

我希望它保留在屏幕的边界内。从图中你可以看到我有两个问题：

table 超出屏幕右侧的末尾
名称标题在滚动时位于名称列表的后面（这在附加的 jfiddle 中不会发生）

当我添加这个时 css:

table {
    display: block;
    overflow: scroll;
}

table在屏幕边界内；但是标题行上的粘性不起作用。左栏的粘性也不太好（请看图片）。

请看我对 jfiddle 的尝试；但是，我无法让 Bootstrap 工作（我包含了 cdns）。

https://jsfiddle.net/Glyndwr/2tfLu87a/11/

我的目标是：

Table留在屏幕范围内
当我滚动时顶部标题行和左列保持不变
当我滚动时名称标题保留在前面

关于使右上角的“名称”单元格变粘的更多解释。这是起始位置：

当我向右滚动时，“名称”列在前面，这是正确的：

但是，当我向下滚动时，“名称”单元格不固定：

所以我需要的是让“名称”单元格在向右和向下滚动时保持不变。

Answer 1

您可以 set/make thead 本身 sticky 而不是单独的行/tr。至于行中的名称，因为它们是每个 tbody 的 tr 的 first-child，所以您可以 select 它们并应用样式，如下所示：

tbody>tr>td:first-child{
  background: red;
  position: sticky;
  left: 0;
}

然后您可以将 table 包裹在一个块容器中，使其可以垂直和水平滚动。请参阅下面的 CSS 示例：

.table-wrapper{
  margin: 0 auto;
  display: block;
  width: 98vw;
  height: 95vh;
  overflow: auto;
  border: 1px solid black;
}

我已经编辑了你的 jsfiddle here。

Answer 2

部分答案。仍然需要弄清楚如何解决将 table 保持在屏幕内的主要问题。 @Yong 部分回答了“名称”单元格问题。

替换：

table thead tr.first th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
}

table thead tr.second th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    background: white;
}

table thead tr.third th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    background: white;
}

用 Yong 的代码（我想到用 z-index-3 替换 z-index: 1）：

thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;/*replace 1 with 3 */
    background: white;
    border: 1px solid black;
}

这样也让代码简单了很多。我们还可以将原始代码的 z-index: 1 替换为 z-index-3.

当我添加 css 以将 table 保持在页面边界内时，HTML table 粘性列和行停止工作

The HTML table sticky columns and rows stop working when I add css to keep the table within the page boundaries

html

javascript

css

twitter-bootstrap-3