How to remove horizontal lines in a table in html?

user_10169230 0
Viewed 8834

I want to remove horizontal lines from my HTML table

I have tried using CSS like border-bottom and border-top and set the value to 0 but that didn't change; whereas border-right and border-left working 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>

I want to remove those horizontal lines using CSS like border-bottom but failed.

i have just added psuedo code this is how actually my table looks like enter image description here

i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well

html-table css html
2 Answers

Try to add style to td element. Not to tr.

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

This should do the work

user_103172270
Related