带有粘性头和可滚动主体问题的 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.