我有一个表，位于页面上的容器中。当用户滚动过去时，我试图让表格的标题粘在页面顶部。我尝试了多种方法来使标题具有粘性，但我运气不佳。表数据正在JS中生成。任何帮助都会很棒！超文本标记语言 <div class="container-fluid"><div id="userTable" class="sticky-table"> <table id="ticketsTable"> <thead id="head" class="sticky-header"</thead> <tbody id="body"> </tbody> </table> </div></div>JavaScriptfunction generateTableHeader() { var headerArray = generateHeaderArray(), headerString = "<thead id='head'><tr>" + "<th></th>"; if (!headerArray.length) { $("#head").empty(); $("#userTable").append("<h1 id='noTicketsFound'>No tickets found.</h1>"); return; } headerOrder.forEach(function(key) { var isChecked = key; if (!$(".dropdown-menu-fixed #" + key).is(":checked")) { isChecked += " uncheckedColumn"; } headerString += "<th data-property='" + key + "' class='sortableHeader " + isChecked + "'>" + dictionary[key] + "</th>"; }); headerString += "</tr></thead>"; // replaceWith seems faster than separate calls to empty then append. $("#head").replaceWith(headerString); // Add SORTCLASS to SORTPROPERTY column, since that is already sorted. $(".sortableHeader." + SORTPROPERTY).addClass(SORTCLASS);}使标题粘在滚动功能上function stickyTableHeader() { $(".sticky-table").each(function() { var el = $(this), offset = el.offset(), scrollTop = $(window).scrollTop(), stickyHeader = $(".stickyHeader", this); if (scrollTop > offset.top && scrollTop < offset.top + el.height()) { stickyHeader.css({ visibility: "visible" }); } else { stickyHeader.css({ visibility: "hidden" }); } }); }
3 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
使用 CSS 这非常简单：
th {
position: sticky;
top: 0;
background: #eee;
}
td, th {
padding: 10px;
}
<div class="container">
<h1>Some Title</h1>
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
</tbody>
</table>
</div>
猛跑小猪
TA贡献1858条经验 获得超8个赞
我相信的立场：粘性；尚未得到所有浏览器的支持。
我有一个有点严厉的解决方案，但它适用于所有浏览器。基本上，您使用一个 Div 作为另一个 Div 的掩码。
这两个 div 都包含完全相同的表。mask-div 将有效地裁剪表格以仅显示标题。
<div class = 'mask-div'>
<table>Copy of Table A</table>
</div>
<div class='scrolling-div">
<table> Table A </table>
</div>
<style>
div{
top:0px;
left:0px;
}
.mask-div{
width:100%;
position: fixed;
height:40px;
overflow: hidden;
background:white;
}
<style>
料青山看我应如是
TA贡献1772条经验 获得超8个赞
th {
position: sticky;
top: 0;
background: #eee;
}
td, th {
padding: 10px;
}
<div class="container">
<h1>Some Title</h1>
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
<tr>
<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
</tr>
</tbody>
</table>
</div>
- 3 回答
- 0 关注
- 115 浏览
添加回答
举报
0/150
提交
取消