大佬教程收集整理的这篇文章主要介绍了javascript – Table Border-top仅在第一行没有css3,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用下面的代码来获取每个td的边框,但我也需要一个顶部第一行的边框.
是)我有的:
内容
内容
内容
我想要的是:
内容
内容
内容
.MyCarTable td { border-bottom: 1px solid grey; }
解决方案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和伪类).
但正如你所说,你已经整合了你的转发器代码.
以上是大佬教程为你收集整理的javascript – Table Border-top仅在第一行没有css3全部内容,希望文章能够帮你解决javascript – Table Border-top仅在第一行没有css3所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。