html - 如何删除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 删除那些水平线，但失败了。

我刚刚添加了伪代码这就是我的 table 的实际样子

我想把所有列的布料、衬衫、裤子的水平线直接移到底部

Answer 1

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

这应该可以完成工作