Creating a sticky header on a thead

早过忘川 提交于 2019-12-18 12:22:47

问题


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.

I found this on 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.

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


回答1:


Unless there is a bug in Chrome you can't fix the thead directly. Therefore you have to fix it on the th element:

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



回答2:


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

If you want to jump the gun: working example here

EDIT

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

JSFIDDLE




回答3:


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;
}



回答4:


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.

The solution I found was to use css pseudo classes first-child and 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-child and 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:

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 anymore because 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

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.



来源:https://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!