帶有粘性頭和可滾動主體問題的 Bootstrap 表
[英]Bootstrap table with sticky thead and scrollable body issue
問題描述
當您在 bootstrap table thead 部分中提供sticky-top類並滾動正文時，thead 單元格正在失去邊框透明度，並且可以在下面看到滾動正文，這很丑陋。
SO中的相關問題非常過時，我想知道是否有適當的解決方法
thead{ background:white !important; } tbody{ background:lightblue !important; }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> </head> <body> <table class="table table-bordered table-striped"> <thead class="sticky-top"> <tr></tr> <tr><th colspan="3">TH</th><th colspan="2"></th></tr> <tr><td colspan="3"></td><th>TH</th><th>TH</th></tr> <tr><th>TH</th><th>TH</th><th>TH</th><td></td><td></td></tr> </thead> <tbody> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> </tbody> </table> </body> </html>
1 個解決方案
解決方案1
0 2021-10-13 08:36:32
您可以使用 boxshadow 為您的 < thead > < tr > 設置邊框，它將解決該問題。
thead{ background:white !important; } thead tr{ box-shadow:-1px -1px 0px #ccc; } tbody{ background:lightblue !important; }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> </head> <body> <table class="table table-bordered table-striped"> <thead class="sticky-top"> <tr></tr> <tr><th colspan="3">TH</th><th colspan="2"></th></tr> <tr><td colspan="3"></td><th>TH</th><th>TH</th></tr> <tr><th>TH</th><th>TH</th><th>TH</th><td></td><td></td></tr> </thead> <tbody> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> <tr><td>TD</td><td>TD</td><td>TD</td><td>TD</td><td>TD</td></tr> </tbody> </table> </body> </html>
在繼續使用引導表類（表響應型和表型，表剝離型）的同時如何使粘糊糊的主題
[英]How to have sticky thead while keep using bootstrap table classes (table-responsive and table, table-stripped …)
如何在bootstrap模態體上創建一個帶有固定標題的可滾動表？
[英]how to create a scrollable table with fixed headers on a bootstrap modal body?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.