Question

如何使用css或jquery仅在表格的第一行添加border-top？

我正在使用下面的代码来获取每个td的边框，但我也需要第一行的边框。

我不能在这个项目中使用CSS3 btw。

我有什么：

含量

我想要的是什么：

含量

.MyCarTable td {
    border-bottom: 1px solid grey;
}

Answer 1

一切都可以用CSS完成，这在这种情况下是首选的方式，因为性能原因。除非你真的需要，否则不要使用javascript，因为它不能以任何其他方式完成。

解决方案1：使用`first-child`伪类

添加其他样式定义。

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable tr:first-child td {
        border-top: 1px solid grey;
    }

别担心。浏览器长期以来一直支持这种特殊的伪类。甚至IE从版本7开始支持它。这是一个JSFiddle，显示了这一点。

解决方案2：使用`th`元素的表头

如果您的表有标题行，则在其中使用th元素而不是td，并为标题单元格设置不同的样式。但只有在第一行单元格的语义内容实际上是下面行的单元格标题描述时才使用它。否则我不会建议。

如果在同一容器中有连续的表，则下一个表从前一个表的最后一行获得顶部边框。并且您不希望它们在第一行应用顶部边框，因为它会重复边框。

解决方案（如this JSFiddle中所示）类似，也仅适用于第一个表：

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable:first-child tr:first-child td {
        border-top: 1px solid #f99;
    }

正如您所看到的，顶行的边框仅为第一个表和第一行设置。所有连续表都不会设置它。该示例当然仅与上面的第一解决方案兼容。如果您使用th元素的路径，则应使用两者的组合（th和伪类）。

但正如您所说，您已整合了转发器代码。

Answer 2

$(".MyCarTable tr:first").css({
    borderTop: "1px solid grey"
});

Answer 3

试试这个：

.MyCarTable tr{border-top: 1px solid grey;}
.MyCarTable tr + tr {border-top: none !important;}

或者

.MyCarTable tr td {border-top: 1px solid grey;}
.MyCarTable tr + tr td {border-top: none !important;}

“+”是CSS中的相邻选择器。 IE7 +和所有其他现代浏览器都支持相邻选择器。