如何在html表格中删除水平线？

Question

我想从HTML表格中删除水平线

我尝试过使用border-bottom和border-top这样的CSS，并将其值设置为0，但是并没有改变；而border-right和border-left可以正常工作。

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>

我想使用border-bottom之类的CSS删除那些水平线，但是失败了。

我刚刚添加了伪代码 这是我的桌子实际上的样子

我也想从布料，衬衫和裤子的所有列上直接删除那些水平的线

Answer 1

尝试为td元素添加样式。不要tr。

Answer 2

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

这应该完成工作