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

Question

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

我怎么做？

Answer 1

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

选项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-childCSS伪类.使用:last-child该类不需要对HTML进行任何更改,因此如果您无法更改HTML,则可能是更好的选择.CSS几乎与上面的相同:

CSS:

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

这种方法的缺点是9之前的Internet Explorer版本不支持的:last-child伪类.

Answer 2

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

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;
}