<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
jquery - 表格中的粘性标题 (div)
网址 [ http://androidplus.ml/demo/time-table/ ]
我创建了一个简单的时间表，我希望星期几(标题)始终可见 - 命令已修复。
我试过使用 jquery.sticky.js 但没有正确效果。
第一行加长了……不知道为什么:
我希望标题隐藏在表格中。但是，我不知道该怎么做。我尝试了很多想法 - 什么都没有
请帮忙。
是这样的: 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;
}
最佳答案
将所有行包装在另一个 div 中，而不是 div.table 中的所有内容，并单独为该 div 和 margin-top:height 设置溢出滚动。
关于jquery - 表格中的粘性标题 (div)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36487882/