Question

我知道之前在this帖子中已经回答了这个问题，但我一直在尝试将其应用到我的代码中，我不知道出了什么问题。

这就是我想要的：

IWantThis

这就是我所拥有的：

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>

这是我用该代码获得的：

wrongtable

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

谢谢大家的时间。

Answer 1

只需更改你的css for .noborders＆gt; td由此

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

整体就像

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不要在整张桌子上使用边框。您可以在特定列上使用边框。

试试这个。

＆＃13;

.bor{
  border:solid 1px #000;
  
 }
table{
  border-collapse: collapse;
  }

＆＃13;

<html>
  <body>
    <table>
      <tr>
        <td class="bor">Ye</td>
        <td class="bor">Ye</td>
        <td class="bor">Ye</td>
        </tr>
      <tr>
        <td class="bor">Ye</td>
        <td class="bor">Ye</td>
        <td class="bor">Ye</td>
        </tr>
      <tr>
        <td>no</td>
        <td>no</td>
        <td>no</td>
        </tr>
     </table>
    </body>
  </html>

＆＃13;

Answer 3

现在这里是解决方案

＆＃13;

table{
    border-collapse: collapse;
}
/*use this class */
.noborders{
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: