html - 使用 CSS 向表格行添加两个顶部边框

Question

如何实现与 http://jsfiddle.net/eLWe3/2/ 中类似的效果？ ，但没有额外的标记？

我尝试使用 tr:before {}，但它弄乱了表格。解决方案必须适用于 IE8 及更高版本，回退到 IE7 上的单边框是可以的。

Answer 1

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)以使其在该浏览器中运行。