Geek asks and answers

Strange behavior with crash and collapse

I am trying to create an organization chart in HTML. The code is pretty simple, but I have some rendering problems in Chrome / Safari and Opera.

Here's what the result should look like since it works in Firefox and IE:

Desired result, Firefox and IE

Here in Chrome and Safari

Chrome and Safari

And here in Opera:

Opera

The problem arises from a property border-collapse: collapsein 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 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;
}
+5
source share
3 answers

, -, . , , colspan=3 3 .

, 3- . , . , . -. Chrome , Firefox , , - , CSS 2.1, , .

border: hidden, Chrome, Opera.

, . HTML, . HTML5 CR, .

, , , . , . , :

<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>
+4

jsfiddle Chrome Safari.

FF IE, Opera.

(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
}

, , , , .

0

Adding a new empty line <tr></tr>under colspan will fix this problem (not a nice solution, but it works).

0
source

More articles:


All Articles