basti1012.bplaced.net

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: <img class="vorschau" src="image/tabellenheader.png" alt="bild">

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>