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

Question

我有可变数量的表行 (n)，我希望边框底部应用于行 0..(n-1)

我该怎么做？

Answer 1

您有两个选择:(1) 在 HTML 中的最后一行添加一个专门的类；或 (2) 在您的 CSS 中使用 :last-child 伪类。

选项 1:专业类(class)

如果您可以将类应用于您的 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;
}

方案二: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 伪类。