html - border-collapse 和 colspan 的奇怪行为

Question

我正在尝试用 HTML 制作组织结构图。代码相当简单，但我在 Chrome/Safari 和 Opera 中呈现时遇到了一些问题。

这是在 Firefox 和 IE 中运行的结果应该是这样的:

这是在 Chrome 和 Safari 中

这是在 Opera 中:

问题来自 CSS 中的 border-collapse: collapse 属性。如果我使用旧的编码风格 cellspacing="0"cellpadding="0" 它或多或少会起作用，但在 HTML5 中无效。

我创建了一个 jsFiddle 来显示问题:http://jsfiddle.net/aGVp4/7/

我的 HTML:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3" class="right bottom"></td>
        <td colspan="3" class="bottom"></td>
        <td></td>
    </tr>
    <tr> <!-- No colspan here, to make the layout symmetrical -->
        <td class="right"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="right"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" class="case"></td>
        <td colspan="4"></td>
        <td colspan="2" class="case"></td>
    </tr>
</table>

还有我的 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;
}

Answer 1

这些问题似乎是由浏览器中对折叠边框模型的不同解释引起的。 border conflict resolution是根据单元而不是槽定义的，当您使用 colspan=3 时，一个单元跨越 3 个槽。

第 2 行的第 2 个单元格有实心底边框，第 3 行的第 2 个单元格没有上边框。当边界崩塌时，稳固胜不败。但是单元格只是部分相邻，因为它们跨越不同的列。浏览器以不同的方式处理。 Chrome 使边框跨越上部单元格的所有列，而 Firefox 使边框仅跨越一列，即单元格共享的一列——这更合理，但 CSS 2.1 似乎没有解决这个问题。

我尝试使用 border: hidden，这在 Chrome 上有帮助，但在 Opera 上会导致新问题。

看来有两种选择。您可以使用 HTML 属性，如果它们能胜任的话。尽管在 HTML5 CR 中被宣布为过时和禁止，但同一文档还需要在浏览器中继续支持它们。

但更简洁、或许更稳健的方法是通过添加更多空单元格来避免此问题。这意味着将两个第 3 行单元格分成两个单元格，以便其中只有一个单元格与第 2 行的单元格共享边界。这使得表格更像网格，但本质上并没有变得更复杂:

<table class="orgchart">
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case"></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case" ></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td></td>
    <td colspan="2" class="bottom"></td>
    <td class="right bottom"></td>
    <td  class="bottom" ></td>
    <td colspan="2" class="bottom" ></td>
    <td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
    <td class="right"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="right"></td>
    <td></td>
</tr>
<tr>
    <td colspan="2" class="case"></td>
    <td colspan="4"></td>
    <td colspan="2" class="case"></td>
</tr>
</table>