CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-5bootstrap-table
Vaggelis
Vaggelis

Reputation: 1011

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>

Upvotes: 0

Views: 14851

Answers (3)

Marcelo Araujo
Marcelo Araujo

Reputation: 1

I have tried this and it work for me:

html table

    <div id="table" class="table-responsive mt-5">
        <table class="table table-striped table-hover table-sm">
            <thead>
            <tr id="thead">
                <th scope="col">Hora</th>
                <th scope="col">Id Operação</th>
                <th scope="col">Descrição</th>
                <th scope="col">Cod Relação</th>
                <th scope="col">Valor</th>
            </tr>
            </thead>
            <tbody id="table-body"><tr>
    <td id="data" class="fw-bold"></td>
    <td id="id"></td>
    <td id="descricao">Saldo do dia</td>
    <td id="correlacao"></td>
    <td id="valor" class="text-success text-bold fw-bold">R$&nbsp;1.500,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:35:00</td>
    <td id="id">73af8882-9ab6-479f-97c2-56aa37cc53bb</td>
    <td id="descricao">Viagem a vista</td>
    <td id="correlacao">9</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.500,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">09:33:00</td>
    <td id="id">0501ec39-7f4b-4e06-849c-95f54b5c76af</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">4</td>
    <td id="valor" class="text-success text-bold">R$&nbsp;1.000,00</td>
</tr><tr>
    <td id="data" class="fw-bold">08:38:00</td>
    <td id="id">82d7518e-a283-4f42-b1fc-03b981175856</td>
    <td id="descricao">Despesa a vista</td>
    <td id="correlacao">6</td>
    <td id="valor" class="text-danger text-bold">-R$&nbsp;1.000,00</td>
</tr></tbody>
        </table>
    </div>

CSS

#table{
    height: 50vh;
    overflow: scroll;
}

#thead{
    position: sticky;
    top: 0;
    z-index: 1;
}

#table-body{
    position: relative;
}

Upvotes: 0

mj damavandi
mj damavandi

Reputation: 1

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;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105873

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>

Upvotes: 9

Related Questions