CSS：除了最后一行之外，我如何在表格行上设置边框底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3680041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: how do I have a border-bottom on table rows, except for the last row
提问by NullVoxPopuli
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?
我怎么做？
回答by KP.
You have two options: (1) adding a specialized class in the HTML to the last row; or (2) using the :last-childpseudo class in your CSS.
您有两个选择：（1）在 HTML 中的最后一行添加一个专门的类；或 (2):last-child在 CSS 中使用伪类。
Option 1: Specialized Class
选项 1：专业课
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，则可以在最后一行添加一个专门的类。如果您的标记是由服务器端脚本（例如 PHP 脚本）生成的，您将需要编辑该脚本以添加类似的标记。
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
选项 2：CSS 伪类
The alternative is to use the :last-childCSS pseudo class. Using the :last-childclass 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-childCSS 伪类。使用: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 supportthe :last-childpseudo class.
这种方法的缺点是9之前的Internet Explorer版本不支持的:last-child伪类。
回答by Nate
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，你所要做的就是我们not()CSS 中的选择器，就像这样：
tr:not(:last-child) {
border-bottom: 1px solid #E3E3E3;
}
回答by Bryan Butler
tr:last-child td {
border-bottom: none;
}
Saves you putting a class on the last tag.
保存您在最后一个标签上放置一个类。
回答by Web Designer cum Promoter
this is used with any class call in html
这与 html 中的任何类调用一起使用
tr:last-child {
border-bottom: none;
}
回答by Scott
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');
});
回答by Muhammad Nasir Shamshad
You can also use this way
你也可以用这种方式
table tr:not(:last-of-type) { border-bottom: none; }
