Androidplus Androidplus - 11 days ago 7
CSS Question

Sticky header in table (div)

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

I created a simple time table and i would like to days of the week (header) are always visible - command fixed.

I've tried with jquery.sticky.js but without correctly effect.

Screenshot

The first row is extended ... I don't know why:

Screenshot2 (gif)

I would like the header was hidden in a table. However, I do not know how to do it . I've tried a lot of ideas - nothing

Please help.

Something like this:
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

Wrap all the rows in another div instead of everything in div.table and set overflow scroll for that div alone and margin-top:height of header.