0

I have a bootstrap table and i append the contents of a db in its tbody,but i cant really get a responsive vertical scroll only in tbody only(with a fixed header),i tried to mess around with css and make the tbody display:block with overflow:auto and it kind of works but i lose responsiveness in the thead cell widths,they become shorter that the tbody cells.

is there a particular bootstrap class that can do this ?

tbody{
max-height: 10vh;
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<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>
</head>
<body>
<div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
</tbody>
</table>    
</div>
</body>
</html>
Vaggelis
  • 912
  • 5
  • 17

1 Answers1

5

You can use the sticky-top class and let the div container be the scrolling element via a custom class.

clamp() can help you to set a minimal height inside your max-height rule to, at least, see one row.Added also a white background to hide what scrolls behind .

possible example using mostly BS classes.

.tbodyDiv{
max-height: clamp(5em,10vh,250px);
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<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>
</head>
<body>
hello i'm a sticky header
<div class="tbodyDiv">
<table class="table table-bordered table-striped text-center">
<thead class="sticky-top bg-white">
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
</tbody>
</table>    
</div>
</body>
</html>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This works, however, the scroll bar is stretched not across ```````` but across the whole ````````. Is there a way to make the scroll bar just for ```````` ?
     – MikhailRatner Mar 14 '23 at 20:44
  • 1
    @MikhailRatner , to only let tbody scroll requires to reset the table display of the whole table . display:grid could be an option, but will require lots of tunning to match your table. Once the table layout is reset , you loose it. no cols nor colspan nor rowspan is avalaible. here is a simple example https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771 – G-Cyrillus Mar 15 '23 at 14:55