使用css在表格中设置最后一个td

Question

我想在不使用特定TD上的CSS类的情况下在表中设置最后一个TD的样式.

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

我希望包含文本"Five"的TD没有边框但是我不想使用类.

Answer 1

在:last-child选择应该这样做,但它不是在IE的任何版本的支持.

我担心你别无选择,只能上课.

Answer 2

您可以使用相关规则:

table td + td + td + td + td {
  border: none;
}

这仅在运行时未确定列数时才有效.

Answer 3

你可以使用:last-of-type伪类:

tr > td:last-of-type {
    /* styling here */
}

有关更多信息以及与不同浏览器的兼容性,请参阅MDN.有关详细信息,
请查看W3C CSS指南.

Answer 4

你可以使用last-child psuedo类

table tr td:last-child {
    border: none;
}

这将仅为最后一个td设置样式.它尚未得到完全支持,因此可能不合适

Answer 5

如果您已经在使用javascript,请查看jQuery.它支持独立于浏览器的"last-child"选择器,你可以做这样的事情.

$("td:last-child").css({border:"none"})

Answer 6

尝试:

tr:last-child td:last-child{
    border:none;
    /*any other style*/
}

这只会影响表中最后一个td元素,假设是唯一一个(否则,你只需要识别你的表).虽然,非常一般,如果您向表中添加更多内容,它将适应最后的TD.所以,如果是特殊情况

td:nth-child(5){
    border:none;
}

应该够了.