What is the easiest way to eliminate horizontal lines in an HTML table?

I am struggling to remove the horizontal lines from my HTML table

Although I have attempted using CSS properties like border-bottom and border-top with a value of 0, they did not make any difference. On the other hand, border-right and border-left are functioning perfectly.

tr {
  border-bottom: 0;
  /* border-bottom:none; */
}
<table style="border:1px solid black;">
  <tr>
    <td style="padding:0px 15px 0px 65px;"><strong>Type</strong></td>
    <td style="padding:0px 15px 0px 20px; "><strong>Quantitiy</strong></td>
    <td style="padding:0px 15px 0px 0px;"><strong>price</strong></td>
    <td style="padding:0px 15px 0px 0px;"><strong>total price</strong></td>
  </tr>
  <tr class="type">
    <td style="padding:5px 15px 0px 65px;">{{type}}</td>
    <td style="padding:5px 15px 0px 20px;">{{meters}}</td>
    <td style="padding:5px 15px 0px 0px;">{{price}}</td>
    <td style="padding:5px 15px 0px opx;">{{price_total}}</td>
  </tr>
</table>

My objective is to eliminate those horizontal lines by using CSS such as border-bottom, but so far, I have been unsuccessful.

I have just added psuedo code to illustrate how my table currently appears https://i.sstatic.net/r4BEX.png

I aim to get rid of those horizontal lines from cloth, shirt, pants straight away to the bottom for all the columns simultaneously

htmlcsshtml-table

Answer №1

table, th, td {
    border-collapse: collapse;
}
td{
    border:1px solid black;
    border-top: none;
    border-bottom: none;
}

This code will achieve the desired outcome

Answer №2

Experiment with enhancing the appearance of the td tag instead of the tr tag.

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

What is the best way to make a sticky floating sidebar that stays fixed while scrolling?

I'm facing a challenge on my website where I want a sidebar on the left to stay with the user as they scroll. The sidebar should scroll along with the user until it's 5px from the top of the page, at which point it should remain fixed in place. ...

javascriptjquerycssscroll

What is the best way to create a miniaturized image of a webpage for sharing on Facebook?

I'm looking for a way to post a link to users' Facebook walls with a thumbnail image of their created page. The page is in HTML format and stored as a series of 'elements' in the database, each with its size, position, and content. Is i ...

phphtmlfacebookthumbnails

Jquery doesn't immediately hide an element after the first click.TabPage.getSelection().extentNode rectangular_HTML

I'm experiencing a peculiar issue with an event listener $(document).on('click', '.suggested-location-item', function(event) { event.preventDefault(); $('#IDsuggestedLocationsList').html(''); $(&apo ...

javascriptjqueryhtml

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

csstypescript

arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...

htmlcssbootstrap-4

Is it possible to choose a complete HTML element within NetBeans?

Currently using netbeans 7.1 and curious about the possibility of selecting an entire HTML element such as a div tag. If I wanted to select the inner div for deletion: <div id="outer"> <div id="inner"> This is inner Content </ ...

htmlnetbeans

Retrieve a specific column value upon button click in HTML and JavaScript

I am faced with a table containing multiple columns, each row equipped with an edit button. https://i.sstatic.net/3S5VP.png Upon clicking the edit button, a modal view pops up where users can input values that are then sent via AJAX to my controller. ht ...

javascriptjqueryhtmlajaxmodal-dialog

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

javascripthtmlcss

Creating a Dual Y-Axis Chart with Two Sets of Data in chart.js

I utilized the chart.js library to write the following code snippet that generated the output shown below. My primary concern is how to effectively manage the labels on the horizontal axis in this scenario. CODE <!DOCTYPE html> <html lang="en"& ...

javascripthtmlgraphchartschart.js

After submitting the form, the delete button in Bootstrap 4 has transformed into an unusual shape

I have a panel on my page, inside the panel header there is a red delete button. The panel content includes a form with several buttons (the red delete button is not inside the form, but linked to it with the form="abc" attribute). In the image below, whe ...

htmlbuttonbootstrap-4

When a checkbox is selected, new input fields will dynamically appear

I have a table with 3 text fields and I would like to dynamically add the same set of text fields when a checkbox is clicked. Below is the code snippet I have, how can I achieve this using PHP and JavaScript? echo "<td>Screen ".$i."</td>"; ...

javascriptphphtml

Showcase an image stored in my sqlite3 database on my Python Flask web application

My goal is to create a web application connected to a database where users can search for specific names and display the corresponding image stored in the database. The images in the database are stored as png BLOBs. The database is structured with a tabl ...

pythonhtmlsqliteflask

Animating the display and concealment of a Ui Bootstrap alert within an AngularJS modal window

Trying to create a dynamic animation for an ng-hide feature used on a Ui Bootstrap alert button within a Ui Bootstrap Modal is proving to be quite challenging. The goal is to have the alert slide in and out while simultaneously fading in and out. Although ...

javascriptcssangularjsangular-ui-bootstrap

Can the text linked to a specific element be shown on the screen?

I've been delving into the world of Selenium and C# lately, and I'm curious to know if there's a way to retrieve the text associated with a specific element. For instance, consider this snippet of HTML that contains the desired content: &l ...

c#htmlseleniumselenium-webdriver

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

cssangularangular-materialangular-reactive-formsangular-flex-layout

How to automatically close a Bootstrap modal after submitting a form

I am facing an issue with a Bootstrap modal dialog that contains a form. The problem is that when I click the submit button, the form is successfully submitted but the modal dialog does not close. Here is the HTML code: <div class="modal fade" ...

javascripthtmljquerybootstrap-modal

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

javascripthtmlcssreactjs

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...

javascripthtml

What is the best way to dynamically alter HTML elements on my webpage?

I have a selection of radio buttons on my webpage: <form ...> <input type="radio" name="people" checked> Member <input type="radio" name="people"> Manager <input type="radio" name="people"> Supervisor <!-- Here is t ...

javascriptjqueryhtmljquery-selectorsjquery-validate

Selecting the initial item of every nested tag repeatedly for a total of n times

Is there a way to stop coloring elements after 'tue 7-1-1' using CSS? I am only allowed to manipulate the first child of every element up until a certain point through CSS, without modifying the existing code. Note: Span elements are nested wit ...

htmlcss