skip to Main Content

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.

enter image description here

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


  1. 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

    .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>
                  <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>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. Adding this style to .details class solves the problem

      .details {
        display: none; 
      }
    

    You can do this dynamically using javascript if you need that class to be visible on click of a button (display: block when the button is clicked)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search