0

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

我创建了一个简单的时间表，我希望一周中的几天（标题）始终可见 - 命令已修复。

我试过 jquery.sticky.js 但没有正确的效果。

截屏

第一行被延长了......我不知道为什么：

截图 2 (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;
}
4

2 回答 2

0

尝试position: absolute在您的 CSS 中应用该属性。这将使任何元素“粘”在适当的位置。

于 2016-04-07T22:15:05.957 回答
0

将所有行包装在另一个 div 中，而不是 div.table 中的所有内容，并单独为该 div 设置溢出滚动和页眉的 margin-top:height。

于 2016-04-07T22:32:26.037 回答