basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>
     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>