6

I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.

Here is what the result should look like, as it works in Firefox and IE:

Desired result, Firefox and IE

Here is in Chrome and Safari

Chrome and Safari

And here is in Opera:

Opera

The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.

I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/

My 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>

And my 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;
}
Andreas Schwarz
  • 1,788
  • 17
  • 42
  • This is rather odd, even for a fairly complicated table like this. As an aside, the table has 8 columns but only 7 columns on 3rd row, so an empty cell should be appended; but this affects the symptoms of the problem only, not the problem itself. If you set `style="border-color: red"` on the second cell of the second row, you’ll see that the disturbing line is part of the border of this cell. But what might be the cause of this strange phenomenon? – Jukka K. Korpela Mar 15 '13 at 08:26
  • @JukkaK.Korpela Thanks for your remark, I edited my post. I don't get it either: the HTML is valid, I don't use CSS hacks or exotic things, so I'm baffled. – Andreas Schwarz Mar 15 '13 at 15:43

3 Answers3

5

The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.

The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.

I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.

It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.

But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:

<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>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks for the detailed answer. It is a bit annoying to have to separate the cells, but I can live with that :) – Andreas Schwarz Mar 16 '13 at 20:12
  • FWIW - This is a known bug (https://bugs.webkit.org/show_bug.cgi?id=20840) for many, many years... sadly, no good solutions to this problem other than separating the cells as described above. – Stephen Nov 14 '14 at 14:32
1

Add a new empty row <tr></tr> under the colspan will fix this problem (not a beautiful solution but works).

Calvin Han
  • 11
  • 1
0

I played with your jsfiddle, and found a hack to fix the issue in Chrome and Safari.

Also works on FF and IE, but didn't test on Opera.

Try this (jsfiddle):

td.bottom {
  border-top: 1px solid white; // this is the hack
  border-bottom: 1px solid black;
}
td.right.bottom {
  border-top: none; // fix for IE
}

As this is a hack, it may not work as your chart grows complex, but hope this helps in short-term.

haejeong87
  • 847
  • 1
  • 10
  • 20
  • Thanks for your answer, unfortunately the result is even stranger with Opera, so I can't use it :) – Andreas Schwarz Mar 15 '13 at 15:40
  • Oh, that's a bummer. Perhaps you should remove all colspans, and only use border-top and border-right to draw all the lines. (not using border-bottom and border-left). Define 3 classes: (both, top, right), and use those only. – haejeong87 Mar 15 '13 at 19:27