Tabellenheader gleichmässig fixieren
Hallo,
Ich versuche etwas ganz Simples zu tun. Ich versuche einen mehrzeiligen Tabellenheader am oberen browser rand zu fixieren.
Dies gelingt mir auch aber ich habe dabei folgendes Problem. Der Header verändert dann seine Breite und passt nicht mehr auf die darunter stehenden Daten.
Hier ein Screenshot zur Demonstration:
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
body{
height:2000px;
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
padding:200px 0 200px 0;
}
.tab{
position:STICKY;
top:0px;
left:calc(50% - 300px);
min-width: 600px;
width:auto;
table-layout: fixed;
border-collapse: collapse;
border:2px solid black;
margin-left:-8px;
}
.tab th {
text-decoration: underline;
}
.tab th,
.tab td {
height:25px;
text-align: left;
}
.tab td:nth-child(1),.tab th:nth-child(1){
padding-left:10px;
}
.tab td:nth-child(1),
.tab th:nth-child(1) {
min-width:200px;
}
.tab td:nth-child(2),
.tab th:nth-child(2) {
min-width: 200px;
}
.tab td:nth-child(3),
.tab th:nth-child(3) {
width: 200px;
}
thead {
position:relative;
top:0;
left:calc(50% - 300px);
background-color:black;
color: #FDFDFD;
border:2px solid black;
}
.tab thead tr {
display: block;
position: relative;
}
.tab tbody {
display: block;
overflow:hidden;
width: 100%;
height:auto;
}
.tab tbody tr:nth-child(even) {
background-color: grey;
}
.tab tbody tr:nth-child(odd) {
background-color: lightgrey;
}
</style>
<table class="tab">
<thead>
<tr><th>Name</th> <th>Name1</th><th>Name2</th></tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var neu;
for (var i = 0; i < 40; i++) {
neu=document.createElement('tr');
neu.innerHTML='<td>bla'+i+'</td><td>blödsinn'+i+'</td><td>test'+i+'</td>';
document.getElementsByTagName('tbody')[0].appendChild(neu);
}
$(window).scroll(function(){
var g=$('tbody').offset();
g=g.top;
if(g>=300){
$('thead').css('position','fixed')
}else{
$('thead').css('position','sticky')
}
});
</script>