I am working with a table that has multiple rows, and my goal is to make the border of a row extend over other rows when it is expanded. Refer to the image below for a visual representation. I am utilizing Bootstrap 5 and JQuery for this task. I have created an image to better illustrate what I am trying to achieve: https://i.sstatic.net/TvKJW.png
You can see how the border encompasses the individual items in the "T-Shirts" section. Here is the code snippet I am using:
$(document).ready(function() {
$('tr:not(.header)').hide();
$('tr.header').click(function() {
$(this).find('span').text(function(_, value) {
return value == '^' ? 'v' : '^'
});
$(this).nextUntil('tr.header').slideToggle(100, function() {});
});
});tr.header {
cursor: pointer;
}
input[type=checkbox]{
/* Double-sized Checkboxes */
transform: scale(1.20);
padding: 10px;
}
.text-xs {
font-size: 10px;
}
::-webkit-scrollbar {
display: none;
}
table tr {
border-spacing: 0 18px;
}
tr:not(.thead){
border-radius: 10px;
}
tr:not(.header){
transform: scale(0.90);
}
tr:not(.addButton):not(.header) {
outline: 1px solid #0F6DFD;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-md table-borderless" id="table" style="width: 65%; color: #117AFF;">
<thead>
<tr class="header .thead">
<th width="10%">NUMBER</th>
<th>ITEM</th>
<th></th>
<th></th>
<th width="20%">INFO</th>
<th width="10%">INCLUDE</th>
</tr>
</thead>
<tr class="header mt-3 shadow-sm">
<th>042</th>
<th colspan="3">T-Shirt</th>
<th><span class="">v</span></th>
<th><input class="form-check-input mx-auto d-block" type="checkbox" id="flexCheckDefault"></th>
</tr>
<tr class="pt-3 shadow-sm">
<td class="align-middle col-1"><img src="img/bars-staggered-solid.svg" class="img-fluid w-25 mx-auto d-block"></td>
<td class="align-middle col-1"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"></td>
<td class="align-middle col-8">Nike</td>
<td class="align-middle col-6" colspan="2">
<div class="d-flex flex-column">
<div class="text-xs">0 times, 0 times by Client</div>
<div class="text-xs">0 times, 0 times by Client</div>
<div class="text-xs">2 comments</div>
</div>
</td>
<td class="align-middle"><i class="fa-regular fa-pen-to-square"></i></td>
</tr>
<tr class="pt-3 shadow-sm">
<td class="align-middle col-1"><img src="img/bars-staggered-solid.svg" class="img-fluid w-25 mx-auto d-block"></td>
<td class="align-middle col-1"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"></td>
<td class="align-middle col-8">Adidas</td>
<td class="align-middle col-4" colspan="2">
<div class="d-flex flex-column">
<div class="text-xs">0 times, 0 times by Client</div>
<div class="text-xs">0 times, 0 times by Client</div>
<div class="text-xs">2 comments</div>
</div>
</td>
<td class="align-middle"><i class="fa-regular fa-pen-to-square"></i></td>
</tr>
<tr class="addButton">
<td colspan="6" width="100%"><a href="#" class="btn btn-success fw-light" role="button" aria-disabled="true">Add new</a></td>
</tr>
</table>