如何避免边框折叠？

Question

这是一个让我忙碌了一段时间的问题。

如您在示例代码中所见，我正在尝试设置单元格顶部的边框。 我希望实现单元格的边框看起来像我给DIV设置的边框。 您有任何想法如何做到这一点吗？我已经尝试设置border-image，但它也不起作用。

- user1437032

---

可能是CSS虚线边框渲染问题的重复。 - Jukka K. Korpela

这个问题实际上并不是关于边框合并的。它是关于在表格单元格角落渲染边框的问题，而这个问题在一个旧问题中已经得到了很好的解决。 - Jukka K. Korpela

Answer 1

您是说您期望的是这个吗：http://jsfiddle.net/35qgP/4/

table {
    width: 50%;
}
.border1 td {
    border-top: 3px solid red;
}
.border2 td {
    border-top: 1px dotted blue;
}
.border3 td {
    border-top: 1px dashed blue;
}

或者对所有的 td 使用 border-collapse: collapse;，像这样：

td {border-collapse: collapse;}

- Praveen Kumar Purushothaman

---

很抱歉，不行。正如您所看到的，当单元格边框相交时，蓝色点会重复出现。 - user1437032

没有交叉的边界，也没有边框塌陷，因为没有相邻的边界。 - Jukka K. Korpela

嗨...感谢提供的信息。请将其发布为答案，我会把它标记为已解决。不过我已经创建了一个解决方法;-) - user1437032

@user1437032 已经添加了 border-collapse: collapse;。 - Praveen Kumar Purushothaman

Answer 2

试试这个？

http://jsfiddle.net/35qgP/2/

- Billy Moat

---

嗨，像素数量并不重要。更重要的是蓝色点被加倍了。眼睛会注意到这种不规则性。 - user1437032