html - 如何隐藏或删除特定的 td 边框

Question

我知道这个问题之前在 this 中得到了回答发布，但我一直在尝试将其应用到我的代码中，但我不知道哪里出了问题。

这就是我想要得到的:

这是我的:

table {
  border-collapse: collapse;
}
.noborders > td {
  border: none;
}

<table border="1">
  <thead></thead>
  <tbody>
    <tr>
      <td>ye</td>
      <td>ye</td>
      <td>ye</td>
    </tr>
    <tr>
      <td>ye</td>
      <td>ye</td>
      <td>ye</td>
    </tr>
    <tr class="noborders">
      <td>no</td>
      <td>no</td>
      <td>no</td>
    </tr>
  </tbody>
</table>

这就是我使用该代码得到的结果:

我尝试在 css 部分使用 table{border-bottom:0}，这几乎可以工作，我可以看到问题是整个表格边框无法从第三行移除当我在第三行 td 上使用 border: none 时。

谢谢大家的宝贵时间。

Answer 1

只需更改 .noborders > td 的 css

.noborders > td{
       border-color: transparent;
    border-bottom-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
}

整体会像

table{
    border-collapse: collapse;
}
.noborders > td{
       border-color: transparent;
    border-bottom-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
}

<table border="1">
    <thead></thead>
    <tbody>
        <tr><td>ye</td><td>ye</td><td>ye</td></tr>
        <tr><td>ye</td><td>ye</td><td>ye</td></tr>
        <tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
    </tbody>
</table>