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

Question

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

我尝试过使用CSS，如border-bottom和border-top，并将值设置为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删除这些水平线，但失败了。

我刚刚添加了psuedo代码，这是我的表的实际外观

​

我想把布料、衬衫、裤子上的水平线条直接去掉，把所有的柱子都去掉。

Answer 1

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

这样就可以完成工作了

Answer 2

尝试向td元素添加样式。不是给tr的。