, wie ich kann einen Tabellenkopf fixieren, wenn Scroll

Question

Mein Tisch thead haben 2 tr mit diferents colspan und rowspan wie dieses folgendes Bild:

<table id="header-fixed"> 
    <thead>      
     <tr id="tr1" role="row" style="background-color: rgb(204, 9, 47);"> 
      <th rowspan="2" colspan="1">Unidade</th> 
      <th rowspan="1" colspan="1">Orçado</th> 
      <th rowspan="1" colspan="1">Realizado</th> 
      <th rowspan="1" colspan="3">Atingimento no Resultado - Variação</th> 
     </tr> 
     <tr id="tr2" role="row" style="background-color: rgb(204, 9, 47);"> 
      <th rowspan="1" colspan="1">Resultado</th> 
      <th rowspan="1" colspan="1">Resultado</th> 
      <th rowspan="1" colspan="1">Variação</th> 
      <th rowspan="1" colspan="1">%</th> 
      <th rowspan="1" colspan="1">Ating.</th> 
     </tr> 
    </thead> 
... 
</table> 

Ich brauche den Header dieser Tabelle beheben beim Scrollen , so, fand ich diesen Code:

https://stackoverflow.com/a/4709775/8032896

Dieser Code fast Arbeit, wHE n Ich scrolle, der Header ist fest, aber die Spaltenbreite ist wie dieses Bild falsch.

Kann mir jemand helfen?

Answer 1

versuchen diesem Beispiel

td { 
 
     border-bottom: 1px solid #ccc; 
 
     padding: 5px; 
 
     text-align: left; /* IE */ 
 
    } 
 
    td + td { 
 
     border-left: 1px solid #ccc; 
 
    } 
 
    th { 
 
     padding: 0 5px; 
 
     text-align: left; /* IE */ 
 
    } 
 
    .header-background { 
 
     border-bottom: 1px solid black; 
 
    } 
 
    
 
    /* above this is decorative, not part of the test */ 
 
    
 
    .fixed-table-container { 
 
     width: 50%; 
 
     height: 200px; 
 
     border: 1px solid black; 
 
     margin: 10px auto; 
 
     background-color: white; 
 
     /* above is decorative or flexible */ 
 
     position: relative; /* could be absolute or relative */ 
 
     padding-top: 30px; /* height of header */ 
 
    } 
 

 
    .fixed-table-container-inner { 
 
     overflow-x: hidden; 
 
     overflow-y: auto; 
 
     height: 100%; 
 
    } 
 
     
 
    .header-background { 
 
     background-color: #D5ECFF; 
 
     height: 30px; /* height of header */ 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     left: 0; 
 
    } 
 
    
 
    table { 
 
     background-color: white; 
 
     width: 100%; 
 
     overflow-x: hidden; 
 
     overflow-y: auto; 
 
    } 
 

 
    .th-inner { 
 
     position: absolute; 
 
     top: 0; 
 
     line-height: 30px; /* height of header */ 
 
     text-align: left; 
 
     border-left: 1px solid black; 
 
     padding-left: 5px; 
 
     margin-left: -5px; 
 
    } 
 
    .first .th-inner { 
 
     border-left: none; 
 
     padding-left: 6px; 
 
     } 
 
\t \t 
 
\t 
 
    
 
    /* for complex headers */ 
 
    
 
    .complex.fixed-table-container { 
 
     padding-top: 60px; /* height of header */ 
 
     overflow-x: hidden; /* for border */ 
 
    } 
 
    
 
    .complex .header-background { 
 
     height: 60px; 
 
    } 
 
    
 
    .complex-top .th-inner { 
 
     border-bottom: 1px solid black; 
 
     width: 100% 
 
    } 
 
    
 
    .complex-bottom .th-inner { 
 
     top: 30px; 
 
     width: 100% 
 
    } 
 
    
 
    .complex-top .third .th-inner { /* double row cell */ 
 
     height: 60px; 
 
     border-bottom: none; 
 
     background-color: #D5ECFF; 
 
    } 
 

<div class="fixed-table-container complex"> 
 
     <div class="header-background"> </div> 
 
     <div class="fixed-table-container-inner"> 
 
     <table cellspacing="0"> 
 
      <thead> 
 
      <tr class="complex-top"> 
 
       <th class="first" colspan="2"> 
 
       <div class="th-inner">First and Second</div> 
 
       </th> 
 
       <th class="third" rowspan="2"> 
 
       <div class="th-inner">Third</div> 
 
       </th> 
 
      </tr> 
 
      <tr class="complex-bottom"> 
 
       <th class="first"> 
 
       <div class="th-inner">First</div> 
 
       </th> 
 
       <th class="second"> 
 
       <div class="th-inner">Second</div> 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>First</td> 
 
       <td>First</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>First</td> 
 
       <td>Second</td> 
 
       <td>Third</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Last</td> 
 
       <td>Last</td> 
 
       <td>Last</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div>