<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.list-group {
max-height: 320px;
/* veya istediğiniz başka bir değer */
overflow-y: auto;
}
</style>
</head>
<body>
<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>
</body>
</html>eğer sayfaya bakarsanız detail kısmından dolayı borderlar üst üste geçip çakışıyor ve kalınlaşıyor. Alağıdaki neden çalışmıyor ? details clasının tüm borderlerını css ile kaldırmayı denedim yine olmadı. bottem border hep var ve üst üste biniyor. yardımcı olabilirseniz sevinirim.<td colspan="100%" class="details"
style="padding: 0 !important; border-bottom: none !important;"> 
