Question posted in 
If you look at the page, the borders overlap and thicken due to the detail section. Why doesn’t the following work? I tried removing all the borders of the details class with CSS, but it didn’t work. The bottom border is always there and overlaps.
td colspan="100%" class="details"style="padding: 0 !important; border-bottom: none !important;"
it does not work.
.list-group {
max-height: 320px;
/* veya istediğiniz başka bir değer */
overflow-y: auto;
}<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 ps-0 pe-0">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Kitap</th>
<th scope="col">Poz No</th>
<th scope="col">Eski Poz No</th>
<th scope="col">Tanım</th>
<th scope="col">Tür</th>
<th scope="col">Birim</th>
<th scope="col">Güncel Fiyat</th>
<th scope="col">Detay</th>
</tr>
</thead>
<tbody id="table-content">
<tr>
<td>Karayolları 2012 ve Sonrası</td>
<td>01.001</td>
<td>10.100.1001</td>
<td>Pist Beton Kaplama Ustası (Hava Meydanları İnş.İçin) </td>
<td>Rayiç</td>
<td>Kg</td>
<td>1415.00 TL</td>
<td><b type="button" class="collapse-button" data-bs-toggle="collapse" data-bs-target="#details_251" aria-expanded="false" aria-controls="details_251" onclick="toggleCaret('details_251')">
Detay
<i class="ph-bold ph-caret-down caret-icon"></i>
</b></td>
</tr>
<tr class="tr-detail" data-id="251">
<td colspan="100%" class="details" style="padding: 0 !important; border-bottom: none !important;">
<div id="details_251" class="collapse table-details">
<div class="container-fluid">
<li class="list-group-item">
<div class="d-flex align-items-center">
<a href="#" download style="background-color: #efe81d; padding: 6px 15px; color: #0b0b0b; text-decoration: none; border-radius: 4px; margin-left: 20px;
transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#eff81d';" onmouseout="this.style.backgroundColor='#efe81d';">
<i class="fa-solid fa-circle-info pe-2"></i><strong>Detay
Sayfasına Git</strong>
</a>
<a href="#" download style="background-color: #1D6F42; padding: 5px 15px; color: #fff; text-decoration: none; border-radius: 4px; margin-left: 20px;
transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#1DaF42';" onmouseout="this.style.backgroundColor='#1D6F42';">
<i class="fa-regular fa-file-excel pe-1"></i>Analizi İndir
</a>
</div>
</li>
<div class="col-md-12">
<div class="row">
<div class="col-md-9 mt-4 d-flex flex-column">
<h4 class="mb-3"><i class="fas fa-cube"></i> Birim Fiyat Tarifi
</h4>
<div class="d-flex flex-column border rounded bg-white" style="overflow-y: auto; flex-grow: 1; padding: 0;">
<p style="flex-grow: 1; padding: 15px; margin: 0;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ratione, magni iusto voluptates esse dolorem, deleniti accusamus, ipsa corrupti saepe hic vitae porro voluptatum earum soluta maiores molestiae rem officia? Quos
veritatis eum amet ipsa saepe recusandae vel ad excepturi obcaecati optio culpa quae assumenda perspiciatis possimus iste numquam ducimus enim nostrum sit, perferendis, harum distinctio. Ratione magnam provident fuga? At
harum, voluptate dignissimos ex unde fugiat sit voluptatem ipsa ipsum reiciendis numquam! Natus obcaecati praesentium, in quaerat dolorum ullam magni omnis veritatis, numquam amet, sint voluptatum modi odit culpa? Voluptatem
ducimus nisi consequatur consequuntur non quidem quod repudiandae labore saepe amet nulla minima, consectetur ex rerum nam necessitatibus officiis? Voluptatibus recusandae reprehenderit voluptas voluptate architecto illum?
Eos, consequuntur molestiae.</p>
</div>
</div>
<div class="col-md-3 mt-4 d-flex flex-column">
<h4 class="mb-3"><i class="fas fa-cube"></i> Birim Fiyatlar</h4>
<ul class="list-group flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<!-- Include other years here -->
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Karayolları 2012 ve Sonrası</td>
<td>01.001</td>
<td>10.100.1001</td>
<td>Pist Beton Kaplama Ustası (Hava Meydanları İnş.İçin) </td>
<td>Rayiç</td>
<td>Kg</td>
<td>1415.00 TL</td>
<td><b type="button" class="collapse-button" data-bs-toggle="collapse" data-bs-target="#details_252" aria-expanded="false" aria-controls="details_252" onclick="toggleCaret('details_252')">
Detay
<i class="ph-bold ph-caret-down caret-icon"></i>
</b></td>
</tr>
<tr class="tr-detail" data-id="252">
<td colspan="100%" class="details" style="padding: 0 !important; border-bottom: none !important;">
<div id="details_252" class="collapse table-details">
<div class="container-fluid">
<li class="list-group-item">
<div class="d-flex align-items-center">
<a href="#" download style="background-color: #efe81d; padding: 6px 15px; color: #0b0b0b; text-decoration: none; border-radius: 4px; margin-left: 20px;
transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#eff81d';" onmouseout="this.style.backgroundColor='#efe81d';">
<i class="fa-solid fa-circle-info pe-2"></i><strong>Detay
Sayfasına Git</strong>
</a>
<a href="#" download style="background-color: #1D6F42; padding: 5px 15px; color: #fff; text-decoration: none; border-radius: 4px; margin-left: 20px;
transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#1DaF42';" onmouseout="this.style.backgroundColor='#1D6F42';">
<i class="fa-regular fa-file-excel pe-1"></i>Analizi İndir
</a>
</div>
</li>
<div class="col-md-12">
<div class="row">
<div class="col-md-9 mt-4 d-flex flex-column">
<h4 class="mb-3"><i class="fas fa-cube"></i> Birim Fiyat Tarifi
</h4>
<div class="d-flex flex-column border rounded bg-white" style="overflow-y: auto; flex-grow: 1; padding: 0;">
<p style="flex-grow: 1; padding: 15px; margin: 0;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ratione, magni iusto voluptates esse dolorem, deleniti accusamus, ipsa corrupti saepe hic vitae porro voluptatum earum soluta maiores molestiae rem officia? Quos
veritatis eum amet ipsa saepe recusandae vel ad excepturi obcaecati optio culpa quae assumenda perspiciatis possimus iste numquam ducimus enim nostrum sit, perferendis, harum distinctio. Ratione magnam provident fuga? At
harum, voluptate dignissimos ex unde fugiat sit voluptatem ipsa ipsum reiciendis numquam! Natus obcaecati praesentium, in quaerat dolorum ullam magni omnis veritatis, numquam amet, sint voluptatum modi odit culpa? Voluptatem
ducimus nisi consequatur consequuntur non quidem quod repudiandae labore saepe amet nulla minima, consectetur ex rerum nam necessitatibus officiis? Voluptatibus recusandae reprehenderit voluptas voluptate architecto illum?
Eos, consequuntur molestiae.</p>
</div>
</div>
<div class="col-md-3 mt-4 d-flex flex-column">
<h4 class="mb-3"><i class="fas fa-cube"></i> Birim Fiyatlar</h4>
<ul class="list-group flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
2014
<span class="badge-custom" style="font-size: 0.9em;">4.152,21</span>
</li>
<!-- Include other years here -->
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><td colspan="100%" class="details"style="padding: 0 !important; border-bottom: none !important;"> it does not work.
2
Answers
it is because of the 2nd tr element of your code, which it has "tr-details" as its class. if u remove it, no overlaped borders would left
Adding this style to .details class solves the problem
You can do this dynamically using javascript if you need that class to be visible on click of a button (
display: blockwhen the button is clicked)