Sticky-Header in der Tabelle (div)

Question

URL [http: // androidplus.ml/demo/time-table/]

ich eine einfache Zeittabelle erstellt, und ich würde zu Tagen der Woche gefällt (header) sind immer sichtbar - Befehl behoben.

Ich habe versucht mit jquery.sticky.js aber ohne richtiger Wirkung.

Die erste Zeile erweitert wird ... Ich weiß nicht, warum:

Ich möchte der Header in einer Tabelle versteckt war. Ich weiß jedoch nicht, wie ich es machen soll. Ich habe viele Ideen ausprobiert - nichts

Bitte helfen.

Etwas wie folgt aus: http: // www.matts411.com/static/demos/grid/index.html ...

HTML:

<div class="content"> 

     <div class="table"> 
<div class="days"> 
    <div class="cell headr hb">PON<div></div></div> 
    <div class="cell headr">WT<div></div></div> 
    <div class="cell headr hb">ŚRO<div></div></div> 
    <div class="cell headr">CZW<div></div></div> 
    <div class="cell headr hb">PI<div></div></div> 
</div> 

<div class="row"> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">MATMA</div> 
    <div class="cell ca">ANGIELSKI</div> 
    <div class="cell">INFORMATYKA</div> 
    <div class="cell ca">BIOLOGIA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">WF</div> 
    <div class="cell">WF</div> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">MATEMATYKA</div> 
    <div class="cell ca">MATEMATYKA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">MATEMATYKA</div> 
    <div class="cell">ANGIELSKI</div> 
    <div class="cell ca">NIEMIECKI</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">POLSKIA</div> 
    <div class="cell ca">GEOGRAFIA</div> 
    <div class="cell">ANGIELSKI</div> 
    <div class="cell ca">POLSKI</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">BIOLOGIA</div> 
    <div class="cell ca">GEOGRAFIA</div> 
    <div class="cell">MATEMATYKA</div> 
    <div class="cell ca">ANGIELSKI</div> 
</div> 
<div class="row"> 
    <div class="cell ca">MATEMATYKA</div> 
    <div class="cell">ANGIELSKI</div> 
    <div class="cell ca">BIOLOGIA</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">MATEMATYKA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">BIOLOGIA</div> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">BIOLOGIA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">BIOLOGIA</div> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">BIOLOGIA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">BIOLOGIA</div> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">BIOLOGIA</div> 
</div> 
<div class="row"> 
    <div class="cell ca">INFORMATYKA</div> 
    <div class="cell">BIOLOGIA</div> 
    <div class="cell ca">POLSKI</div> 
    <div class="cell">POLSKI</div> 
    <div class="cell ca">BIOLOGIA</div> 
</div> 

CSS:

 .content { 
height: auto; 
    max-height: 500px; 
    overflow-x: scroll; 
    min-width: 211px; 
    overflow-y: scroll; 
} 
.table { 
    display: table; 
    margin: 0px auto; 
    width: 100%; 
    padding-bottom: 5px; 
} 
.row { display: table-row; } 
.cell { 
    display: table-cell; 
    padding: 20px; 
    color: white; 
    background: #3B3737; 
    font-size: 11px; 
    min-width: 100px; 
} 
.headr { 
    text-align: center; 
    font-size: 16px; 
    background: #A83622 !important; 
    border-bottom: 4px solid #312929; 

} 
.days{ 
    display: table-row; 
} 
.ca{ 
    background: #312E2E; 
} 

Answer 1

Umschließen Sie alle Zeilen in einem anderen div anstelle von allem in der div.table und setzen Sie den Überlaufscroll für dieses div-Element und den Rand oben: Höhe des Headers.

Answer 2

Tr y Anwenden der Eigenschaft position: absolute in Ihrem CSS. Dadurch wird jedes Element an seinem Platz "haften".