html折叠式边框,html – 边框折叠和colspan的奇怪行为

我正在尝试用

HTML制作组织结构图.代码相当简单,但我在Chrome / Safari和Opera中渲染时遇到了一些问题.

这是结果应该是什么样的,因为它适用于Firefox和IE：

这是Chrome和Safari

这是在Opera：

问题来自CSS中的border-collapse：collapse属性.如果我使用旧编码样式cellspacing =“0”cellpadding =“0”它可以或多或少地工作,但在HTML5中无效.

我的HTML：

我的CSS：

.orgchart {

border-spacing: 0;

border-collapse: collapse;

}

td {

width: 3em;

height: 1em;

}

td.case {

border: 1px solid black;

}

td.right {

border-right: 1px solid black;

}

td.bottom {

border-bottom: 1px solid black;

}

td.top {

border-top: 1px solid black;

}