Html 在头上创建粘性标题

Creating a sticky header on a thead

提问by zazvorniki

I have a table that can become come very long on the page so the header gets lost and so I thought a sticky header would fix that. You scroll down too far and the header is still there to let you know what the fields are.

我有一个表格，它可以在页面上变得很长，所以标题会丢失，所以我认为粘性标题可以解决这个问题。您向下滚动太多，标题仍然存在，让您知道字段是什么。

I know the traditional ways of doing a sticky header with jQuery, but I wanted to try a different way with just css.

我知道使用 jQuery 制作粘性标题的传统方法，但我想仅使用 css 尝试不同的方法。

I found thison the web and it is supposed to work, but I cannot seem to make it do what it is supposed to.

我在网上找到了这个，它应该可以工作，但我似乎无法让它做它应该做的事情。

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

and help would be great or any other css tricks to help this work would be great.

和帮助会很棒，或者任何其他 css 技巧来帮助这项工作都会很棒。

I set up a jsFiddel over hereof what my form looks like so you can get a good idea of what is happening.

我在这里设置了一个 jsFiddel来展示我的表单的样子，这样你就可以很好地了解正在发生的事情。

回答by Jules

Unless there is a bugin Chrome you can't fix the theaddirectly. Therefore you have to fix it on the th element:

除非Chrome 中存在错误，否则您无法thead直接修复。因此，您必须将其固定在 th 元素上：

thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: white;
    z-index: 10;
}

回答by Benjamin

Take a look at this answer. The magic is in the position: fixed.

看看这个答案。魔法就在position: fixed.

If you want to jump the gun: working example here

如果你想跳枪：这里的工作示例

EDIT

编辑

I don't think you can do this cleanlywithout Javascript. Yet, I was intrigued by the problem, so I made this solution. It uses a wrapper divaround the data with overflow: scroll.

我认为没有 Javascript就不能干净利落地做到这一点。然而，我对这个问题很感兴趣，所以我做了这个解决方案。它使用div带有overflow: scroll.

JSFIDDLE

JSFIDDLE

回答by Max Alexander Hanna

This is the code that worked for me to create a sticky thead on a table...

这是对我有用的代码，可以在桌子上创建粘性标签...

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

回答by willy wonka

I had a similar problem, with the difference I had to figure out how to make it work in a more complex case: the problem I was facing was how to make position sticky work if in the same page there are more tables, some of them with just one row into the thead element and others with 2 rows with th elements.

我有一个类似的问题，不同的是我必须弄清楚如何使它在更复杂的情况下工作：我面临的问题是如果在同一页面中有更多表格，其中一些表格，如何使位置粘性工作只有一行进入 thead 元素，其他的 2 行带有 th 元素。

The solution I found was to use css pseudo classes first-childand last-child.

我找到的解决方案是使用 css 伪类first-child和last-child。

The following code show how to do the trick:

下面的代码展示了如何做到这一点：

// 1st rule:
    thead > :first-child th, thead > :last-child th
    {
        position: sticky;
        z-index: 1;
    }
//2nd rule
    thead > :last-child th
    {
        top: 80px;
    }
//3rd rule
    thead > :first-child th
    {
        top: 50px;
    }

Let's focus on the 2nd and the 3rd css rule: you may be tempted to write them logically ordered as first-childand next the last-child, but it will not work properly. In this solution, in order to work properly you must put the last-child of the 2nd:

让我们关注第 2 条和第 3 条 css 规则：您可能很想将它们按逻辑顺序编写为first-child和 next last-child，但它不会正常工作。在此解决方案中，为了正常工作，您必须放置第二个的最后一个孩子：

thead > :last-child th

BEFORE the first-child that must be written as the 3rd rule:

在必须写为第三条规则的第一个孩子之前：

thead > :first-child th

even if at first look seems to be illogical.

即使乍一看似乎不合逻辑。

So the above is a versatile code that works even if you have either 1 or 2 rows into different thead elements in tables in the same html page because css rules are applied by the browser from top to bottom and after it finishes parsing the html-css content you get the right look of your th elements. But if you invert the 2nd and the 3rd it doesn't work anymorebecause it is needed that in case it has to parse a single th into a thead the 3rd rule must overcome the 2nd one to work properly. In fact if you have a table in witch thead you put just one row into, you may have a problems using just

所以上面是一个通用的代码，即使你有 1 或 2 行到同一个 html 页面中表格中不同的 thead 元素，因为 css 规则是由浏览器从上到下应用的，并且在它完成解析 html-css 之后content 你得到你的元素的正确外观。但是，如果您反转第二个和第三个，则它不再起作用，因为如果它必须将单个 th 解析为 thead，则第三个规则必须克服第二个规则才能正常工作。事实上，如果你有一张桌子，你只放了一行，你可能会遇到问题，只使用

thead th

or inverting the 2nd rule with the 3rd rule in my code like

或者在我的代码中用第三条规则反转第二条规则

thead > :first-child th {...}
thead > :last-child th {...}

because when you have a single row the first-child is simultaneously the last-child too so the browser does a mess applying to it the 80px position form the top, that is not what you want.

因为当你有一行时，第一个孩子同时也是最后一个孩子，所以浏览器会在顶部应用 80px 位置，这不是你想要的。