Question

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

发票中的每件商品都在新行中，但是没有边框的行。我试图为tr元素

添加一个类

 border: 0px solid black;

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

在这个片段中创建了一个表，但到处都有边框

＆＃13;

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

＆＃13;

Answer 1

在CSS中使用边框样式，以删除表格中<tr> <td>的边框。

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

它解决了吗？

Answer 2

为表格设置边框，但对于单元格，您必须根据每个单元格的位置为每个单元格指定一个自定义类。我建议在top，right，bootm和left上有4种边框。另外，不要忘记为表格设置border-collapse以折叠彼此的TD边框：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

tr.noBorder td {
  border: 0;
}
tr.noBorder td:first-child {
  border-right: 1px solid;
}

＆＃13;

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

＆＃13;

HTML表tr没有边框

3 个答案: