粘頭 - 優文庫

網址[HTTP：// androidplus.ml/demo/time-table/]粘頭

我創建了一個簡單的時間表，我想一週的天（頭）始終可見 - 命令已修復。

我試過用jquery.sticky.js但沒有正確的效果。

Screenshot

第一排延伸......我不知道爲什麼：

Screenshot2 (gif)

我想的頭被隱藏在表中。但是，我不知道該怎麼做。我試了很多想法 - 沒有什麼

請幫忙。

事情是這樣的： 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; 
}

來源

2016-04-07 Androidplus

請發佈您的代碼 – DinoMyte

完成。我張貼URL這個時間表，但確定。 – Androidplus