HTML表格tr无国界

Question

我需要使用HTML表，td，tr创建发票。 我需要这样的东西

发票中的每个项目都在新行中，但是没有边框的行中。 我试图为tr元素添加一个类

 border: 0px solid black;

但它不能正常工作。 你能告诉我吗？

在此代码段中创建了一个表格，但是到处都有边框

 <!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>

Answer 1

在CSS中使用边框样式（如下所示）在表格中删除<tr> <td>边框。

border-right:none;
border-left:none;
border-bottom:none;
border-top:none

解决了吗？

Answer 2

为表格设置边框，但是对于单元格，必须根据其位置为每个单元格指定一个自定义类。 我建议顶部，右侧，展台和左侧有4种边界。 同样不要忘记为表设置border-collapse来折叠彼此的TD边界：

 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>

Answer 3

您可以使用具有样式属性border：0的特定类来删除单个行的边框。 在下面找到解决方案（在代码段顶部）：

 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>

HTML表格tr无国界

问题描述

3 个解决方案

解决方案1
5 已采纳 2018-05-25 12:15:36

解决方案2
0 2018-05-25 12:08:09

解决方案3
0 2018-05-28 06:59:20

HTML表格tr无国界

问题描述

3 个解决方案

解决方案1 5 已采纳 2018-05-25 12:15:36

解决方案2 0 2018-05-25 12:08:09

解决方案3 0 2018-05-28 06:59:20

解决方案1
5 已采纳 2018-05-25 12:15:36

解决方案2
0 2018-05-25 12:08:09

解决方案3
0 2018-05-28 06:59:20