Sabit başlık

Question

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

ben basit bir zaman tablosu oluşturulur ve ben haftanın günleri istiyorum (başlık) her zaman görünür - komut sabit.

jquery.sticky.js ile çalıştım ama doğru bir şekilde etkilemedim.

ilk satır uzatılır

... Nedenini bilmiyorum:

Ben başlığının tabloda gizlendi istiyoruz. Ancak, nasıl yapacağımı bilmiyorum. Çok fazla fikir denedim - hiçbir şey

Lütfen yardım edin. Böyle

şey: 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

Tüm satırları div.table içindeki her şey yerine başka bir div içinde kaydırın ve yalnızca bu div ve kenar boşluğu için taşma kaydırmayı ayarlayın: üstbilgi yüksekliği.

Answer 2

Tr y CSS'nizde position: absolute özelliğini uygulayarak. Bu, herhangi bir elemanın yerinde "sopa" yapacaktır.