javascript – Table Border-top仅在第一行没有css3

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

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

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

是)我有的：

我想要的是：

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

一切都可以用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和伪类).

但正如你所说,你已经整合了你的转发器代码.

相关文章