Table header to stay fixed at the top when user scrolls it out of view with jQuery

后端未结

关注

 25  2144

悲&欢浪女 2020-11-22 05:38

I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500

25条回答

盖世英雄少女心 (楼主)

2020-11-22 06:35

div.wrapper {
    padding:20px;
}
table.scroll thead {
    width: 100%;
    background: #FC6822;
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align-left;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

Name	Vorname	Beruf	Alter
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41
Müller	Marie	Künstlerin	26
Meier	Stefan	Chemiker	52
Schmidt	Sabrine	Studentin	38
Mustermann	Max	Lehrer	41

Demo: css fixed table header demo

0 讨论(0)

查看其它25个回答