Encountering an issue with using overflow-y inside tbody. Attempting to set the maximum height of the tbody results in it shrinking into a single column, as shown in image 1. Seeking assistance in resolving this problem. Thank you.
Below is the HTML code:
.item-list .item-detail{
margin: 0 0 2px 4px;
font-size: 1.25em;
}
.table > :not(caption) > * > * {
padding: 0.3rem 0.3rem !important;
background-color: var(--vz-table-bg);
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px var(--vz-table-accent-bg);
}
.color-display{
display: inline-block;
width: 16px;
height: 16px;
}
.text-center {
text-align: center !important;
}
/* The codes i added*/
.tbody-responsive{
display: block;
max-height: 200px;
overflow-y: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f425f43">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf0edf1">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<div class="item-list py-4">
<div class="item-header">
</div>
<div class="item-body">
<div class="row">
<div class="col-12">
<table class="table">
<thead class="">
<th>
<h4><b>DETAIL</b></h4>
</th>
<th class="text-center">
<h4><b>STOCK (Client)</b></h4>
</th>
<th class="text-center">
<h4><b>STOCK (XXX)</b></h4>
</th>
</thead>
<tbody class="tbody-responsive w-100">
<tr>
<td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
<td class="item-detail text-center">1</td>
<td class="item-detail text-center">1</td>
</tr>
<tr>
<td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
<td class="item-detail text-center">1</td>
<td class="item-detail text-center">1</td>
</tr>
(more table rows here)
</tbody>
</table>
</div>
</div>
</div>
</div>The outcome of the code
Desiring the width to be as shown in the image. Attempts with width:100% or w-100 class did not yield the expected result.
The expected width