Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap responsive table with scrollable tbody?

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/[email protected]/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>
Tags:

2

Answers


  1. 0

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    I typed this code and got my answer.
    It is really strange and illogical.
    I checked it in chrome and firefox, Everything was correct.

    I use bootstrap 5.

    table {
    display: block;
    overflow: auto;
}
thead>th, tbody tr, tbody>tr>th>{
    display: table;
    width: fit-content;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
table {
    width: 185px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search