如何在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>

我想使用CSS（如border-bottom）来删除那些水平线，但是失败了。

我刚刚添加了伪代码，这就是我的表格实际上的样子。

我希望直接将衣服、衬衫和裤子下面的水平线全部删除，并且对所有列都生效。

- john

---

td{border-bottom-width:0;} 上下边框位于单元格上，而不是行上。请注意，您的演示代码没有边框。那么你的问题是什么？ - connexo

哪些行？在你的例子中没有行。 - Oen44

@Oen44 别忘了浏览器有默认样式；一些浏览器可能会默认为表格添加边框样式（我记得 IE 至少在旧版本中是这样的）。 - Jeromy French

我已经添加了一张图片，以便您了解，请查看它。 - john

Answer 1

尝试向 td 元素添加样式，而不是 tr。

- Hlib Liapota

Answer 2

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

这应该可以完成工作。

- Alex