我有一个可变数目的表行(n),我想边框底部应用到行0 ..(n-1)
我怎么做?
解决方法
你有两个选择:(1)在HTML中添加一个专门的类到最后一行;或者(2)在CSS中使用:last-child伪类。
选项1:专业类
如果您可以将类应用于HTML,则可以向最后一行添加专门类。如果您的标记是由服务器端脚本(例如PHP脚本)生成的,您将需要编辑该脚本以添加类似的标记。
HTML:
<table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr class="last"> <td> </td> </tr> </table>
CSS:
table { border-collapse:collapse; } tr { border-bottom: 1px solid #000; } tr.last { border-bottom: none; }
选项2:CSS伪类
另一种方法是使用:last-child CSS伪类。使用:last-child类不需要对HTML进行任何更改,因此如果您无法更改HTML,则可能是更好的选择。 CSS几乎与上述相同:
CSS:
table { border-collapse:collapse; } tr { border-bottom: 1px solid #000; } tr:last-child { border-bottom: none; }
这种方法的缺点是versions of Internet Explorer before 9 don’t support:last-child伪类。