仅在没有CSS3的第一行上表面边框

Question

如何使用CSS或JQuery仅在表中的第一行中添加边框顶？

？

我正在使用下面的代码在每个TD上获得边框，但是我也需要第一行的边框。

我不能在此项目中使用CSS3。

我拥有的内容：

内容

---

内容

---

内容

---

我想要什么：

---

内容

---

内容

---

内容

---

.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;
    }

，不用担心。这种特殊的伪类课程长期以来一直在浏览器中得到支持。自从版本7以来，即使IE也支持它。这是一个显示此工作的JSFIDDLE。

解决方案2：使用th元素

的表标头>

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

连续表问题

如果您在同一容器中有连续的表，则下一个表从上表的最后一行获得顶级边界。而且您不希望他们在第一行上施加顶级边框，因为这重复了边界。

解决方案（如此JSfiddle所示）相似，并且仅适用于第一表：

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

您可以看到Top Row的边界仅设置为第一表和第一行。所有连续的表都不会设置它。当然，此示例仅与上面的第一个解决方案兼容。如果您使用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 和所有其他现代浏览器中都支持相邻的选择器。