html - 如何删除从表中的单元格分割线，同时保留最后一个单元格的水平线与CSS？

Question

给定一个这样的表:

table {
  padding: 10px;
  border: 0px solid black;
  border-radius: 10px;
  border-spacing: 75px 0px;
  padding-left: 50px;
}

td {
  height: 20px;
  padding: 15px;
  width: 50%;
  border-top: none;
}

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
        est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

我怎么可以取代的空间每行之间的分隔线，剩下最后BUTTOM行，以便该表是完整的，是这样的:

到目前为止，我试图添加到样式如下:

  border-bottom: none;

和

td:last-child{
      border-bottom: 0px solid black;

}

然而，问题是，上面将删除表中的最后一行:

什么是更换每行表中分离出来的水平线，同时保留最后一行，所以表看起来“封闭”的正确方法是什么？

Answer 1

只是在你的CSS添加此。基本上它检查如果 tr 不是最后一个 child 而不是它会删除其 td child 的边框

tr:not(:last-child) td {
    border-bottom: none;
}