What could be causing my border to not function properly?

When examining the page, I noticed that the borders overlap and thicken due to the detail section. I tried to eliminate all borders of the details class using CSS, but unfortunately, it didn't work as expected. The bottom border stubbornly remains in place and overlaps with other elements.

click here to view the image

td colspan="100%" class="details"style="padding: 0 !important; border-bottom: none !important;"

Even after implementing this code, the issue persists.

.list-group {
  max-height: 320px;
  /* or any other desired value */
  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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dfc2de">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa2bfa3">[email protected]</a>/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">Book</th>
              <th scope="col">Poz No</th>
              <th scope="col">Old Poz No</th>
              <th scope="col">Description</th>
              <th scope="col">Type</th>
              <th scope="col">Unit</th>
              <th scope="col">Current Price</th>
              <th scope="col">Detail</th>
            </tr>
          </thead>
          <tbody id="table-content">
            <tr>
              <td>Highways 2012 and Beyond</td>
              <td>01.001</td>
              <td>10.100.1001</td>
              <td>Road Concrete Paving Master (for Airports Constr.)</td>
              <td>Assessment</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')">
                                            Detail
                                            <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">
                    ... (omitted for brevity) ...
                </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.
htmlcssbootstrap-5

Answer №1

The reason for the overlapping borders in your code is the 2nd tr element with the class "tr-details". If you remove it, there will be no more overlapping borders.

.list-group {
  max-height: 320px;
  /* or any other desired value */
  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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209140915">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet>

<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318051804">[email protected]</a>/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">Book</th>
              <th scope="col">Position No.</th>
              <th scope="col">Old Position No.</th>
              <th scope="col">Description</th>
              <th scope="col">Type</th>
              <th scope="col">Unit</th>
              <th scope="col">Current Price</th>
              <th scope="col">Details</th>
            </tr>
          </thead>
          <tbody id="table-content">
            <tr>
              <td>Highways 2012 and Beyond</td>
              <td>01.001</td>
              <td>10.100.1001</td>
              <td>Concrete Paving Specialist (for Airport Construction) </td>
              <td>Rate</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')">
                                            Details
                                            <i class="ph-bold ph-caret-down caret-icon"></i>
                                        </b></td>
            </tr>

            <tr>
              <td>Highways 2012 and Beyond</td>
              <td>01.001</td>
              <td>10.100.1001</td>
              <td>Concrete Paving Specialist (for Airport Construction) </td>
              <td>Rate</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')">
                                            Details
                                            <i class="ph-bold ph-caret-down caret-icon"></i>
                                        </b></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer №2

By simply applying the following CSS style to the .details class, the issue can be resolved

  .details {
    display: none; 
  }

If you require the class to be visible upon clicking a button, you can achieve this dynamically using JavaScript (display: block when the button is clicked)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Acknowledge that a checkbox was found to be unchecked while editing a php/html form

Currently, I am in the process of developing a form using PHP/HTML that enables users to input data, review, and potentially edit their inputs before final submission. One of the key elements within this form is the use of checkboxes. Thanks to resources l ...

phphtmlcheckbox

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

Do not include undesired tags when using Beautifulsoup in Python

<span> I Enjoy <span class='not needed'> slapping </span> your back </span> How can "I Enjoy your back" be displayed instead of "I Enjoy slapping your back" This is what I attempted: result = soup.find_all(&apos ...

pythonhtmlweb-scrapingbeautifulsoup

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js

const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const https = require("https") ; const app = express(); // store static files (e.g css,image files) ...

htmlnode.jsjsonexpress

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

Transmitting the identification number of a post with the help of J

I am currently working on a while loop in PHP that fetches associated results from a query and displays them within a class identified by the user who created the post. My goal is to send the id of the class to PHP, similar to how I am sending the num vari ...

phpjqueryhtmlajaxvariables

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

javascripthtmlcss

The property mentioned was attempted to be accessed during the rendering process, however it is not defined on the instance

I am currently facing four main errors that I need to resolve while working with Vue 3: https://i.sstatic.net/23ir7.png Despite everything else working correctly, my code seems to have issues specifically with user inputs. //############--contact.js-- ...

htmlvue.jsvuejs3

Can you explain the purpose of the behavior: url(); property in CSS?

While browsing the web, I came across a CSS property that caught my eye. It's called behavior, and it looks like this: #element{ behavior: url(something.htc); } I've never used or seen this property before. It seems to be related to Internet ...

cssinternet-explorer

Is there a way to generate a hierarchical list menu using strings?

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

javascriptjqueryhtmlvbscripthta

Using an External Style Sheet on AMP Pages is not allowed

I'm currently in the process of converting my HTML page into AMP Pages. I recently came across a test url on to validate my AMP pages. Here's a screenshot for reference: https://i.sstatic.net/wcDLH.png However, I encountered an issue when tryi ...

htmlcssamp-html

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

cssangularjsionic-framework

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Within the upcoming code snippet, a basic email validation is implemented. An input field's background color will display as white for valid emails and yellow for incorrect values. This functionality operates seamlessly in Firefox; however, in Chrome, ...

javascripthtmlcss

Ensure that only the admin is able to make something vanish for everyone else

Is there a way to hide content for everyone except the admin? Currently, I have this code implemented but it only works when a user is not logged in. When another user logs in, the content is still visible. <?php if( isset($_SESSION['username&a ...

phphtml

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

javascriptcssreactjssasscss-modules

Ways to specify the specific option within a select field

Here is my question: <select name="currency" id="currency"> <option value="AUD"&lgt;AUD</option> <option value="BDT"&lgt;BDT</option> <option value="EUR"&lgt;EUR</option> & ...

javascripthtmljqueryhtml-select

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp