TR级别造型

Question

我有table，我希望在tr级别设置样式。如果我将样式直接应用于tr。

，这在IE7上不起作用

设置table样式的最佳方法是什么，所以我在所有行上划线，但在最顶部或最底部没有线。

所以基本上，表应该看起来像这样

col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3

Answer 1

您可以在没有:last-child选择器的情况下以与IE7兼容的方式执行此操作。当然没有JavaScript：

table tr + tr td {
    border-top: 1px black solid;
}

实际上，您正在使用 top 边框绘制一条线，利用tr + tr选择器将匹配除第一行之外的所有行的事实。

See it in action

Answer 2

要在每行底部添加边框：

table tr td {
border-bottom: 1px solid #000;
}

然后你需要使用一些javascript来改变最后一个的样式，或者使用IE6 / 7中可能不支持的css

table tr:last-child td {
border-bottom: none;
}

示例：http://jsbin.com/ezolur

Answer 3

使用CSS2选择器：

table#mytable tr{
    border-bottom:1px solid black;
}
table#mytable tr:last-child{
    border-bottom:none;
}

Answer 4

尝试：

<tr>
<td colspan="3"><hr/></td></tr>

Answer 5

您可以使用最后一个子选择器：

看看这个小提琴：

http://jsfiddle.net/SGfQy/

编辑： 你可以改变你的表的html，你可以把你的第一行放在thead中，然后将其余的行放在tbody中，然后使用

table tbody tr td{
     border-top:1px solid red;   
}

更新小提琴： http://jsfiddle.net/SGfQy/1/