HTML 表 header 粘性引导程序
[英]HTML table header sticky bootstrap
问题描述
我有一个引导表，我试图将 header 与 position 粘贴在一起：粘性和顶部：0。 它可以工作，但是当我垂直滚动时，表格主体会被强加在 header 上。 我怎样才能解决这个问题？
HTML TH 具有内联 CSS 用于 position 粘性和顶部 0
<body class="profilebody">
<h5 style="text-align: center; font-size: 25px;font-family: 'Alegreya SC', serif;color: #40FF40; padding-left: 25px;"> Updated    Rankings</h5>
<div class="tablewrapper4">
<table class="table table-bordered table-striped table-dark" id="myTable">
<thead style="text-align:center; color:#40FF40">
<tr>
<th scope="col" style="position:sticky; top:0">ID</th>
<th scope="col" style="position:sticky; top:0">Name</th>
<th scope="col" style="position:sticky; top:0">Points</th>
<th scope="col" style="position:sticky; top:0">Edition5 Rank</th>
<th scope="col" style="position:sticky; top:0">Rank</th>
<th scope="col" style="position:sticky; top:0">Change</th>
<th scope="col" style="position:sticky; top:0">Matches Remaining</th>
</tr>
</thead>
<% playerdata[1].forEach(function(player){ %>
<tr style="text-align:center; color:#40FF40">
<td><%=player.Player_ID%></td>
<td><%=player.Player_Name%></td>
<td><%=player.Total_Weighted_Points%></td>
<td><%=player.Edition_5_Rank%></td>
<td><%=player.Rank%></td>
<td><% if(player.Edition_5_Rank > player.Rank) { %>
<% var rankdifference = player.Edition_5_Rank - player.Rank %>
<span> Rank: ⇑ <%=rankdifference%> </span>
<% } else if(player.Edition_5_Rank < player.Rank) { %>
<% var rankdifference = player.Rank - player.Edition_5_Rank %>
<span> Rank: ⇓ <%=rankdifference%> </span>
<% } else { %>
<% var rankdifference = 0 %>
<span> Rank: ⇔ <%=rankdifference%> </span>
<% } %></td>
<td>
<%var remainingames = 9 - player.Edition6_MatchesPlayed%>
<%=remainingames%></td>
</tr>
<% }) %>
</div>
</body>
CSS
.tablewrapper4 {
height: 580px;
overflow-y: auto;
}
有人可以帮忙吗？ 还有什么我需要做的吗？
2 个解决方案
解决方案1
1 2020-07-22 11:44:30
如果您使用table而不是.tablewrapper4滚动，它会起作用，因为无法拆分table元素。
body { padding-bottom: 1000px; } table { height: 580px; overflow-y: auto; background-color: pink; } th { background-color: blue; }
<body class="profilebody"> <h5 style="text-align: center; font-size: 25px;font-family: 'Alegreya SC', serif;color: #40FF40; padding-left: 25px;"> Updated    Rankings</h5> <div class="tablewrapper4"> <table class="table table-bordered table-striped table-dark" id="myTable"> <thead style="text-align:center; color:#40FF40"> <tr> <th scope="col" style="position:sticky; top:0">ID</th> <th scope="col" style="position:sticky; top:0">Name</th> <th scope="col" style="position:sticky; top:0">Points</th> <th scope="col" style="position:sticky; top:0">Edition5 Rank</th> <th scope="col" style="position:sticky; top:0">Rank</th> <th scope="col" style="position:sticky; top:0">Change</th> <th scope="col" style="position:sticky; top:0">Matches Remaining</th> </tr> </thead> <% playerdata[1].forEach(function(player){ %> <tr style="text-align:center; color:#40FF40"> <td><%=player.Player_ID%></td> <td><%=player.Player_Name%></td> <td><%=player.Total_Weighted_Points%></td> <td><%=player.Edition_5_Rank%></td> <td><%=player.Rank%></td> <td><% if(player.Edition_5_Rank > player.Rank) { %> <% var rankdifference = player.Edition_5_Rank - player.Rank %> <span> Rank: ⇑ <%=rankdifference%> </span> <% } else if(player.Edition_5_Rank < player.Rank) { %> <% var rankdifference = player.Rank - player.Edition_5_Rank %> <span> Rank: ⇓ <%=rankdifference%> </span> <% } else { %> <% var rankdifference = 0 %> <span> Rank: ⇔ <%=rankdifference%> </span> <% } %></td> <td> <%var remainingames = 9 - player.Edition6_MatchesPlayed%> <%=remainingames%></td> </tr> <% }) %> </div> </body>
解决方案2
-1 2020-07-22 11:42:26
您是否尝试将z-index: 1添加到粘性元素？ z-index指定元素的顺序。 使用z-index: -1意味着它将位于另一个元素的下方。 关于 z-index 的更多信息
HTML表带有粘性页眉，页脚，列和可滚动的正文（X和Y）
[英]HTML table with sticky header, footer, column AND scrollable tbody (X and Y)
如何将粘性 header 添加到具有下拉过滤器作为标题的引导表？
[英]How to add sticky header to bootstrap-table that has a dropdown filter as the title?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.