HTML table tr with no borders
Question
I need to create an invoice with HTML table, td, tr. I need something like this
that every item in the invoice is in a new row, but a row without border. I have tried to add a class for tr element
border: 0px solid black;
but it is not working properly. Can you advise please?
In this snippet is created a table, but there are borders everywhere
<!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td { border: 1px solid black; } </style> </head> <body> <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
3 answers
solution1
5 ACCPTED 2018-05-25 12:15:36
Use Border style in CSS like below to remove Border of <tr> <td> in Table.
border-right:none;
border-left:none;
border-bottom:none;
border-top:none
Is it solved ?
solution2
0 2018-05-25 12:08:09
Set border for table but for cells you have to specify a custom class to each cell according to its position. I suggest 4 kinds of borders on top, right,bootm and left. Also do not forget to set border-collapse for table to collapse TD borders on each others:
table { border:1px solid #000000; border-collapse:collapse; } td{ padding:10px; } .tB{ border-top:1px solid #000000 } .rB{ border-right:1px solid #000000 } .bB{ border-bottom:1px solid #000000 } .lB{ border-left:1px solid #000000 }
<table> <tr> <td class="rB">test</td> <td class="bB">test</td> </tr> <tr> <td class="rB bB">test</td> <td class="bB">test</td> </tr> </table>
solution3
0 2018-05-28 06:59:20
You can use a specific class with style property border:0 to remove the borders form individual row. Find the solution (on top of your snippet) below:-
tr.noBorder td { border: 0; } tr.noBorder td:first-child { border-right: 1px solid; }
<!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td { border: 1px solid black; } </style> </head> <body> <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr class="noBorder"> <td>January</td> <td>$100</td> </tr> <tr class="noBorder"> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.