Klamry turniejowe z użyciem tylko tabel HTML i CSS

Question

Czy istnieje sposób wyświetlania klamr turnieju przy użyciu tylko tabeli HTML i CSS?

Oto, co chcę osiągnąć:

Answer 1

Spójrz na https://stackoverflow.com/a/262584/1592764. Istnieje znacznik dla wspornika opartego na tabeli oraz jsfiddle.

Oto HTML:

<table summary="Tournament Bracket" class="bracket"> 
<tr> 
    <th>National Semi-Finals<br>Saturday November 8th</th> 
    <th>National Championship<br>Sunday November 9th</th> 
    <th>NJCAA National Champion</th> 
</tr> 
<tr> 
    <td><p>#1 Manchester CC (17-2-1)</p></td> 
    <td rowspan="2"><p></p></td> 
    <td rowspan="4"><p></p></td> 
</tr> 
<tr> 
    <td><p>#4 Triton College (13-4-0)</p></td> 
</tr> 
<tr> 
    <td><p>#2 Herkimer County CC (18-3-0)</p></td> 
    <td rowspan="2"><p></p></td> 
</tr> 
<tr> 
    <td><p>#3 County College of Morris (17-3-0)</p></td> 
</tr> 
</table> 

i CSS:

table.bracket { 
    border-collapse: collapse; 
    border: none; 
} 

.bracket td { 
    vertical-align: middle; 
    width: 40em; 
    margin: 0; 
    padding: 10px 0px 10px 0px; 
} 

.bracket td p { 
    border-bottom: solid 1px black; 
    border-top: solid 1px black; 
    border-right: solid 1px black; 
    margin: 0; 
    padding: 5px 5px 5px 5px; 
} 

.bracket th{ 
    text-align:center; 
} 

EDIT: zmodyfikowany CSS powyżej aby ją bliżej wygląd. Oto jsfiddle - http://jsfiddle.net/4KZ6T/236/

Answer 2

widzę tabeli z 10 kolumn i 30 wierszy licząc od góry (wspornika zwycięzców) do dołu (podwójna eliminacja ...)

Dodać tabelę z tego formatu, ale upewnij się, zresetuj dopełnienie i marginesy strony za pomocą: * {padding: 0; margin: 0 auto;}

Następnym krokiem będzie umieszczenie tabeli w div i ID'it # tableBody, a następnie rozpoczęcie pracy nad Twoim stołem z Elem1 etc ... aż osiągniesz 30 wierszy i 10 kolumn

Answer 3

można owinąć elementy wewnątrz position: relative;div elemencie i nie można użyć position: absolute; zagnieżdżona div

Demo

teraz oczywiście będzie to żmudny proces, ale można użyć klas śledzić poszczególne punkty, ale to jest najlepszy możesz osiągnąć dzięki czystemu CSS.

Przez ostatni dasheddiv można wykorzystać następujący fragment kodu, aby osiągnąć ten efekt

.last { 
    border: 1px dashed #000; 
    border-top: 1px solid #000; 
    border-left: 0; 
    /* Top Left for positioning */ 
} 

Demo 2

Last but not least, table nie będzie dobrym rozwiązaniem dla tego