Html 使用CSS向表行添加两个顶部边框

如何在没有附加标记的情况下实现与中类似的效果

---

我尝试了

tr:before{}

，但它弄乱了表。解决方案必须与IE8及以上版本配合使用，在IE7上回退到单个边框是可以的。

这不是一个好主意，但在相关行/单元格上使用背景图像

也许这是一个可接受的替代方案：

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

是我能接近的。更新后的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间距。据我所知，如果没有一些描述的附加标记，这是不可能的：希望我错了。 ​

编辑-我创建了一个使用生成的内容来获取您想要的差距的：

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

---

它在Firefox、Chrome和IE9+中都有效，对于功能较弱的浏览器，它会回到一个单一的边界。IE8失败的唯一原因是它不支持以

tbody

中的最后一行为目标的

last:child

。您可以将一个类添加到表中的最后一行（直接或使用JavaScript），使其在浏览器中工作。

我想说，下面我的答案中的编辑与您的答案非常接近。它只需要在最后一个表行中添加一个类来支持IE8。