Dziwne zachowanie w przypadku zawijania obramowania i colspan

Question

Próbuję utworzyć schemat organizacyjny w HTML. Kod jest dość prosty, ale mam pewne problemy z renderowaniem w Chrome/Safari i Operze.

Oto co wynik powinien wyglądać, jak to działa w Firefoksie i IE:

Oto w Chrome i Safari

A oto w Operze :

Problem pochodzi z właściwości border-collapse: collapse w CSS. Jeśli używam starego stylu kodowania cellspacing="0" cellpadding="0", działa on mniej lub bardziej, ale nie jest poprawny w HTML5.

stworzyłem jsFiddle pokazać problem: http://jsfiddle.net/aGVp4/7/

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

A mój 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

Problemy wydają się być spowodowane różnymi interpretacjami zwijanego modelu granicy w przeglądarkach. Numer border conflict resolution jest zdefiniowany w kategoriach komórek, a nie slotów, a gdy używa się colspan=3, jedna komórka obejmuje 3 gniazda.

Druga komórka drugiego rzędu ma stałą dolną krawędź, a druga komórka trzeciego rzędu nie ma górnej granicy. Kiedy brzegi się zawalają, bryła nie wygrywa żadnego. Ale komórki są tylko częściowo sąsiednie, ponieważ obejmują różne kolumny. Przeglądarki podają to inaczej. Chrome sprawia, że ​​granica obejmuje wszystkie kolumny górnej komórki, podczas gdy Firefox sprawia, że ​​granica obejmuje tylko jedną kolumnę, tą, którą dzielą komórki - co jest bardziej sensowne, ale wydaje się, że CSS 2.1 pozostawia problem otwarty.

Próbowałem grać z border: hidden, która pomaga w Chrome, ale powoduje nowe problemy w Operze.

Wygląda na to, że są dwie opcje. Możesz użyć atrybutów HTML, jeśli wykonają zadanie. Mimo że są one przestarzałe i zabronione w HTML5 CR, ten sam dokument wymaga również ciągłego wsparcia dla nich w przeglądarkach.

Ale czystsze i być może bardziej niezawodne podejście polega na uniknięciu problemu poprzez dodanie większej liczby pustych komórek. Oznacza to dzielenie dwóch komórek trzeciego rzędu na dwie komórki, tak aby tylko jedna z nich dzieliła się z komórką w drugim rzędzie.To sprawia, że ​​stół jeszcze bardziej podobny do siatki, ale nie w istocie bardziej złożona:

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

Answer 2

grałem z jsfiddle i znalazłem hack napraw problem w Chrome i Safari.

Działa również na FF i IE, ale nie testował w Operze.

Spróbuj tego (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 
} 

Ponieważ jest to hack, to nie może działać jako Twój wykres rośnie skomplikowane, ale mam nadzieję, że to pomaga w krótkim okresie.

Answer 3

Dodaj nowy pusty wiersz <tr></tr> pod colspan będzie rozwiązać ten problem (nie piękne rozwiązanie, ale działa).