Tabellenheader gleichmässig fixieren Lösung 2
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: 
Kommentar abgeben zu diesen Beitrag/Code ? Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
.tab{
min-width: 600px;
width:auto;
table-layout: fixed;
border-collapse: collapse;
border:2px solid black;
margin-left:calc(50% - 300px);
}
.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;
}
.tab thead {
background-color:black;
color: #FDFDFD;
}
.tab thead tr {
display: block;
position: relative;
}
.tab tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.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 < 80; i++) {
neu=document.createElement('tr');
h='bla';
if(i==1 || i==46 || i==70){
h='System';
}
neu.innerHTML='<td>'+h+'</td><td>bla2</td><td>bla3</td>';
document.getElementsByTagName('tbody')[0].appendChild(neu);
text=$('tr').eq(i).find('td').html();
if(text=='System'){
$('tr').eq(i).css('background','red');
}
}
</script>