向CSS表格行添加两个顶部边框

如何获得与http://jsfiddle.net/eLWe3/2/类似的效果，但没有附加标记？向CSS表格行添加两个顶部边框

我尝试了tr:before {}，但它与表混乱。解决方案必须与IE8一起工作，在IE7上回退到一个单一的边界是没关系的。

来源

2012-03-21 mlangenberg

我会说我在下面的答案中的编辑是尽可能接近你会得到。它只需要在IE8支持的最终表格行中添加一个类。 – CherryFlavourPez 2012-03-23 10:21:26

不是一个好主意，但使用的相关行/细胞

来源

2012-03-21 11:36:21 matpol

背景图像也许这是一个可以接受的选择：

tbody { 
    border-bottom: 2px outset pink; 
}

来源

2012-03-21 11:59:15

This fork of your original example是接近我能得到。更新后的CSS是：

table { margin: 0 auto; border-collapse:separate; } 
thead { background: #FDECEE; } 
th { font-weight: bold; } 
tbody tr:last-child td { border-bottom: 1px solid blue; } 
tfoot td { border-top: 1px solid pink; }

但是，正如你所看到的，我已经无法让你在两个边界之间想要的2px的差距。据我所知，如果没有一些描述的附加标记，这是不可能的：希望我错了。

编辑 - 我已经创建了一个使用生成的内容，以获取您的差距new example后：

tbody tr:last-child td:after { 
    content:''; 
    display:block; 
    border-bottom: 1px solid blue; 
    margin-bottom:2px; 
}

它工作在Firefox，Chrome和IE9 +，回落到一个单一的边界为功能较差的浏览器。 IE8失败的唯一原因是因为它不支持last:child来定位tbody中的最后一行。您可以将一个类添加到表中的最后一行（直接或使用JavaScript）以使其在该浏览器中运行。

来源

2012-03-21 12:08:24 CherryFlavourPez

向CSS表格行添加两个顶部边框

回答

相关问题