如何更改最后一个表格的 <tr> 边框颜色

Posted 2023-03-05

【中文标题】如何更改最后一个表格的 <tr> 边框颜色

【英文标题】：How to change last table's <tr> border color

【发布时间】：2014-06-29 21:54:21

【问题描述】：

我有一个包含一些行的基本表。每行的边框底部为 2px，但我希望最后一行根本没有任何底部。但是，我似乎无法用我当前的代码做到这一点。

<table id="products">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr class="productsBottom"></tr>
</table>

这是我的 CSS：

#products tr 
    height: 94px;
    border-bottom: 2px solid #e5e5e5;


tr.productsBottom 
    border-bottom: 0px solid;

对此有任何帮助吗？我似乎不明白为什么当我添加背景颜色时它会起作用，但是以任何方式更改边框似乎没有任何作用？

【问题讨论】：

我想知道您的代码是如何工作的。因为您为表格行提供了边框。只有表格列会接受边框样式。

【参考方案1】：

您需要将border-bottom 设置为'none'，您也可以使用:last-child 选择器直接选择最后一行而无需为其分配类

#products tr:last-child
    border-bottom:none;

您可能还想添加：

#products
    border-collapse:collapse;

【讨论】：

或border-bottom-width: 0; 或border-bottom-color: transparent;...

我不敢相信我花了这么多时间在这上面...非常感谢！

你可能想说这是使用CSS3，所以会出现与旧浏览器的兼容性问题。

哦，好的，谢谢您的关注！ （关于边框折叠，我已经在一些重置 CSS 中添加了这个，但谢谢！）

【参考方案2】：

您的 CSS 中的第一个选择器具有更大的 specificity，因此如果您将边框设置为零，它将覆盖第二个选择器。

您可以通过使用 !important 关键字或更具体的选择器（例如

）来避免这种情况

#products tr.productsBottom 
   border-bottom: 0px solid;

【讨论】：

我现在才注意到，因为我正在为已经完成部分代码的人进行此设计。我通常使用类，而不是 ID，所以这就是我愚蠢到没有注意到的原因。

【参考方案3】：

这取决于css specificity。 #products tr 选择器最具体，所应用的选择器也是如此。为了增加后面选择器使用的特异性：

#products tr.productsBottom 
    border-bottom: 0px solid;

【讨论】：

我可以知道this answer 和这个有什么区别吗？