javascript - 表格边框顶部仅在第一行没有css3

Question

如何使用 css 或 jquery 仅在表格的第一行添加边框顶部？

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

顺便说一句，我不能在这个项目中使用 CSS3。

是）我有的：

内容

我想要的是：

内容

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

score 13 · Accepted Answer

一切都可以仅使用 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，它显示了它的工作原理。

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

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

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

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

如您所见，顶行的边框仅针对第一个表和其中的第一行设置。所有连续的表都不会设置它。这个例子当然只与上面的第一个解决方案兼容。如果您采用th元素的路径，那么应该使用两者的组合（th和伪类）。

但是正如您所说，您已经合并了中继器代码。

score 0 · Accepted Answer

0

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

于 2012-11-06T11:24:13.913 回答

score 0 · Accepted Answer

试试这个：

.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+ 和所有其他现代浏览器都支持相邻选择器。