2016-05-22 10 views
0

Ich habe eine Tabelle, die eine feste Kopfzeile hat. Wenn "fixed" deaktiviert ist, wird die Breite korrekt angezeigt, aber sie ist nicht länger fixiert und wird aus dem Container "div" verschoben. Nachdem die Eigenschaft korrigiert wurde, scrollt sie korrekt, aber die Breite wird nicht ausgerichtet. Mit diesem gegebenen Szenario ist es möglich, die Breiten auszurichten, während diese "feste" Eigenschaft noch verwendet wird?Möglich, feste Header zu machen erben Breite Eigenschaft

.container { 
 
     border: 1px solid black; 
 
     height: 100px; 
 
     overflow-y: scroll; 
 
    } 
 
    td { 
 
     font-size: 40px; 
 
    } 
 
    table { 
 
     table-layout: fixed; 
 
     height: 100%; 
 
    } 
 
    thead{ 
 
     position:fixed; 
 
    }
<div class="container"> 
 
    <table> 
 
     <thead> 
 
      <tr> 
 
       <th> 
 
        header 
 
       </th> 
 
       <th> 
 
        header 
 
       </th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        data 
 
       </td> 
 
       <td> 
 
        data 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

jsFiddle: https://jsfiddle.net/meeow314159/3vs9bmsf/2/

Antwort

0

Nein ist es nicht möglich. Weil es keinen Platz für das Element verlassen, deshalb muss es nicht das Vererben width

Nach MDN

Fest

Sie für das Element nicht Raum verlassen. Positionieren Sie es stattdessen an einer bestimmten Position relativ zum Bildschirmfenster und verschieben Sie es beim Scrollen nicht . Beim Drucken, positionieren Sie es an dieser festen Position auf jeder Seite. Dieser Wert erstellt immer einen neuen Stapelkontext.

Siehe specs über feste Positionierung