What is the procedure for eliminating the underline located at the bottom of the table?

Can anyone please assist me with removing the underlines at the end of the table? I find it quite unattractive and can't seem to figure out how to remove it.

https://i.sstatic.net/stvHt.png

https://i.sstatic.net/YYbrX.png

Below is the code snippet for reference:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233d233f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
    </button>

</div>
<div class="modal-body">

    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-12 col-sm-12 mb-2">
                    <table class="table table-hover table-striped spaceLeft " style="width: 100%">
                        <tbody>
                            <tr>
                                <th>Purchase of </th>
                                <td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
                            </tr>
                            <tr>
                                <th style="width: 60%">Valid until</th>
                                <td style="min-width: 100%">01/01/2022 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
    </div>

</div>
</body>
</html>

I appreciate any help in advance. Thank you!

htmlcssbootstrap-4bootstrap-5

Answer №1

              <tr>
                <th style="width: 60%; border-bottom: none;">Expires on</th>
                <td style="min-width: 100%; border-bottom: none;">
                  01/01/2022
                </td>
              </tr>

Answer №2

If you prefer a borderless design, simply use border:none. To remove the border from the last row's td and th elements in a table with the class "table", you can utilize the selector 

.table tr:last-child th, .table tr:last-child td

.table tr:last-child th, 
.table tr:last-child td{
  border:none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c39223c223e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<table class="table table-hover table-striped spaceLeft " style="width: 100%">
  <tbody>
    <tr>
      <th>Item Purchased</th>
      <td style="min-width: 100%"> 5 Apples BE 34120185 </td>
    </tr>
    <tr>
      <th style="width: 60%">Expiration Date</th>
      <td style="min-width: 100%">01/01/2022 </td>
    </tr>
  </tbody>
</table>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Close</button>
  <button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirm</button>
</div>

Answer №3

 <style>
   table > tbody > tr:last-child > * { 
      border-bottom-width: 0; 
   }
 </style>


<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289978995">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
    </button>

</div>
<div class="modal-body">

    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-12 col-sm-12 mb-2">
                    <table class="table table-hover table-striped spaceLeft " style="width: 100%">
                        <tbody>
                            <tr>
                                <th>Purchase of </th>
                                <td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
                            </tr>
                            <tr>
                                <th style="width: 60%">Valid until</th>
                                <td style="min-width: 100%">01/01/2022 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirm</button>
    </div>

</div>
</body>
</html>

Answer №4

The border at the bottom of the table was added by targeting the tr element. To remove it, you can include this CSS:

   tr:last-child{
       border-bottom: none;
   }

I have utilized the pseudo selector "last-child" to specifically target the last tr element and eliminate the border. Without this selector, all tr elements would have a 0px border at the bottom.

Answer №5

To achieve the desired result, you have the option to use CSS or style tags - a basic example is provided below:

<html>
<head>
<title>HTML CSS JS</title>
</head>
<style>

tr.no-bottom-border td {border-bottom: none}
tr.no-bottom-border th {border-bottom: none}
</style>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc3ddc1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
    </button>

</div>
<div class="modal-body">

    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-12 col-sm-12 mb-2">
                    <table class="table table-hover table-striped spaceLeft " style="width: 100%">
                        <tbody>
                            <tr>
                                <th>Purchase of </th>
                                <td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
                            </tr>
                            <tr class="no-bottom-border">
                                <th style="width: 60%">Valid until</th>
                                <td style="min-width: 100%">01/01/2022 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
    </div>

</div>
</body>
</html>

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

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

csswordpressvisual-composerwpbakery

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

Determining When to Apply max-height / max-width for Images in CSS

At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...

htmlcss

What is the best way to utilize a JavaScript variable as a background within an inline style sheet?

I have a fun project for this evening - I am trying to make my website load a different background image every time the page is refreshed. Earlier on in this project, I managed to make the background interact with window size and screen resolution similar ...

javascripthtmlcssimagebackground

Achieving centered positioning for the 'row' class in Foundation 5, regardless of browser size

While viewing on desktop, the body is centered which is ideal. However, resizing the browser causes it to stretch to fit the full width and I want to avoid this. Regardless of the browser size, I want the first div with the "row" class to be centered with ...

htmlcsszurb-foundation

Tips for adapting the position of a floating div according to its height and environment

Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...

javascriptcss

How can I generate an Xpath for the given element?

I am trying to find the Xpath for the specific name (I1888 - Child 1.1) without using the contains function. Currently, I am using the following xpath: "//span[contains(@class,'TreeTitleRed')][contains(.,'Child 1.1')]", but I would like ...

javahtmlselenium-webdriver

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

csshtml-tablecellpadding

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

output a string from the write_html function in plotly

I am currently attempting to utilize plotly express to generate a string representation of a div object in HTML for integration with other packages. Although I have been following the documentation (Plotly v5.17.0), it seems that my attempts have not been ...

pythonhtmlpython-3.xplotlyplotly-express

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

htmlcssnavbar

Are HTML custom data attributes being included in Google's indexing?

Currently, I am in the process of developing a portfolio module that relies on AJAX, pushState, and hash bangs. Since I am targeting browsers with JavaScript enabled, my main concern lies in the limited capability of HTML custom data attributes for SEO. T ...

htmlcustom-data-attribute

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

htmlcssvue.js

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

csslayoutvisual-studio-code

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

javascriptjqueryhtmlcss

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

htmlcssangular

React-tooltip and a challenge with Server-Side Rendering in Next.js

In my Next.js app, I make use of the react-tooltip library for tooltips. One peculiar issue that I have noticed is that whenever I refresh a page containing a tooltip, I encounter the following error: react-dom.development.js:88 Warning: Prop `dangerously ...

cssreactjsnext.jsserver-side-rendering

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

cssreactjssvg

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...

javascripthtmlweb-componentlit-element

Using React to Dynamically Display JSON Data as HTML

Struggling to incorporate HTML rendering from JSON data into my React component without relying on dangerouslySetInnerHTML. I want to include other React components within the rendered HTML, but facing challenges when trying to render multiple elements or ...

javascripthtmljsonreactjs