stackoom
  简体   繁体   中英

Bootstrap table with sticky thead and scrollable body issue

 原文  2021-10-13 08:05:59  4   1    javascript/ jquery/ twitter-bootstrap/ bootstrap-4/ bootstrap-5

Question

When you give the sticky-top class in a bootstrap table thead section and you scroll the body,the thead cells are losing the border transparency and the scrolling body can be seen underneath which is ugly.

The relative questions in SO are very outdated and i was wondering if there is proper workaround on this 

 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 answers

solution1
 0  2021-10-13 08:36:32

You can give border using boxshadow to your < thead > < tr > It will resolve the issue. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap 4 table with the scrollable body and header fixed How to fix table thead and scrollable tbody(thead contain 3 row) How to have sticky thead while keep using bootstrap table classes (table-responsive and table, table-stripped …) how to create a scrollable table with fixed headers on a bootstrap modal body? Bootstrap 3 scrollable div for table Make tr width match thead width on sticky table header Horizontal scrollable sticky HTML-Table-Header Scrollable table body and fixed header Sticky column and header on bootstrap table HTML table header sticky bootstrap
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM