Reputation: 557
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
i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well
Upvotes: 4
Views: 15095
Reputation: 497
table, th, td {
border-collapse: collapse;
}
td{
border:1px solid black;
border-top: none;
border-bottom: none;
}
This should do the work
Upvotes: 3