CSS:除了最后一行之外，如何在表行中设置边框底

I have a variable number of table rows (n), and I would like the border bottom to apply to rows 0..(n-1)

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

how do I do that?

我该怎么做呢?

5 个解决方案

#1

You have two options: (1) adding a specialized class in the HTML to the last row; or (2) using the :last-child pseudo class in your CSS.

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

Option 1: Specialized Class

If you can apply classes to your HTML, you can add a specialized class to the final row. If your markup is being generated by a server-side script (eg. a PHP script), you will need to edit that script to add similar markup.

如果您可以将类应用到HTML中，您可以将一个专门化的类添加到最后一行。如果您的标记是由服务器端脚本生成的(例如)。需要编辑该脚本以添加类似的标记。

HTML:

HTML:

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

CSS:

CSS:

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

Option 2: CSS Pseudo Class

The alternative is to use the :last-child CSS pseudo class. Using the :last-child class doesn't require any changes to the HTML and so may be a better choice if you aren't able to change the HTML. The CSS is almost identical to the above:

另一种选择是使用:last-child CSS pseudo类。使用:last-child类不需要对HTML进行任何更改，因此如果您不能更改HTML，那么这可能是一个更好的选择。CSS几乎和上面一样:

CSS:

CSS:

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

The drawback of this approach is that versions of Internet Explorer before 9 don't support the :last-child pseudo class.

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

#2

I know this is an old question, but it's worth mentioning that now with CSS3 all you have to do is us the not() selector in your CSS, like this:

我知道这是一个老问题，但值得一提的是，现在CSS3你所要做的就是我们CSS中的not()选择器，就像这样:

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

#3

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

Saves you putting a class on the last tag.

保存在最后一个标签上的类。

#4

this is used with any class call in html

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

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

#5

If you're using jQuery you can use the following script

如果使用jQuery，可以使用以下脚本。

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