：最后一个孩子

Question

我有一张桌子。 tr设置有边框。我想从tr中删除最后一个td边框。下面是示例

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;">
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td> <!-- I want to remove the border from this -->
    </tr>
  </tbody>
</table>

任何答案将不胜感激

Answer 1

：最后一个孩子

：last-child选择器允许您定位最后一个元素直接在其包含元素内。它在CSS中定义选择器级别3规范为“结构伪类”，这意味着用于根据内容与父对象和兄弟姐妹的内容。

https://css-tricks.com/almanac/selectors/l/last-child/

table tr td:last-child{
  border:0
}

Answer 2

:last-child选择器

table {
  border-collapse: collapse;
}
tr {
  border: 1px solid black;
}
tr:last-child {
  border: none;
}

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr><tr>
      <td> a </td>
      <td> b </td> 
    </tr>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr>
  </tbody>
</table>

Answer 3

好的。现在我了解了您想要的内容，可以通过将其添加到CSS中来实现。

table tr td:nth-child(4) {
    border: none;
}

我们将转到您的第四个日，并删除所有边框。如果要删除其他边框，请遵循相同的逻辑，从所需的td中替换4。

Answer 4

您可以使用：last-child 伪类（详细信息here）。

所以您的行应该看起来像（假设您要删除底部边框）：

tr:last-child { border-bottom-style:hidden; }

这可以放在单独的CSS文件中，也可以放在<style></style>标签之间。

Answer 5

只需在 border:none 元素上打一个 td。这将从单元格中删除边框，您可能还想玩 border-right:none, border-bottom:none

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;">
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td>
      <td style="border:none"> adsd </td> <!-- I want to remove the border from this -->
    </tr>
  </tbody>
</table>

如何从tr设置的行中删除最后一个边框？

5 个答案:

：最后一个孩子