CSS：除最后一行外，我如何在表行上设置边框底部

Question

我有一个可变数量的表行（n），我希望边框底部适用于行0 ..（n-1）

我该怎么做？

Answer 1

您有两种选择：（1）在HTML中添加一个专门的类到最后一行;或（2）在CSS中使用:last-child伪类。

选项1：专业类

如果您可以将类应用于HTML，则可以在最后一行添加专门的类。如果您的标记是由服务器端脚本（例如PHP脚本）生成的，则需要编辑该脚本以添加类似的标记。

HTML：

<table>
   <tr>
      <td>
      </td>
   </tr>
   <tr>
      <td>
      </td>
   </tr>
   <tr class="last">
      <td>
      </td>
   </tr>
</table>

CSS：

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr.last
{
   border-bottom: none;
}

选项2：CSS伪类

另一种方法是使用:last-child CSS伪类。使用:last-child类不需要对HTML进行任何更改，因此如果您无法更改HTML，则可能是更好的选择。 CSS几乎与上面的相同：

CSS：

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr:last-child
{
   border-bottom: none;
}

这种方法的缺点是versions of Internet Explorer before 9 don't support :last-child伪类。

Answer 2

我知道这是一个老问题，但值得一提的是，现在使用CSS3，您需要做的就是使用CSS中的not()选择器，如下所示：

tr:not(:last-child) {
    border-bottom: 1px solid #E3E3E3;
}

Answer 3

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

保存您将课程放在最后一个标签上。

Answer 4

这适用于html中的任何类调用

tr:last-child {
    border-bottom: none;
}

Answer 5

如果您正在使用jQuery，则可以使用以下脚本

$(document).ready(function() {
    $(".tableClass tr:not(:last) > td").css('border-bottom', ' 1px solid #DDD');
});

Answer 6

您也可以使用这种方式

table tr:not(:last-of-type) { border-bottom: none; }