htmlcsshtml-tabletree-structure
Can't create proper Tree Structure in table using CSS
I have been trying to make a "connecting line - tree structure" for a tournament bracket system.
However, it is more troubling than I thought. My goal is to have a line connecting the boxes such as http://gyazo.com/4ea425163a8f3e6901b464085421c449, but I do not want to use any images.
I figured it could be done through borders or some other thing but I am unsure. My concept right now does not look too good, and I was wondering if anyone could offer some help on what I should try to go with.
http://jsfiddle.net/zet5uh7f/1/
#spacer {
padding: 5px;
}
#connecter {
border-left: 1px solid black;
}
I figured somehow I have to make this border:left on #connector move to the right, and add something on spacer to make it look normal. Is using a border something you would recommend?
Solution
jsFiddle
fullscreen jsfiddle
solved using only css3 !
html
<div class="test">
<table border="1" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td colspan="2"><strong>Round 1</strong>
</td>
<td colspan="2"><strong>Round 2</strong>
</td>
<td colspan="2"><strong>Round 3</strong>
</td>
<td colspan="2"><strong>Round 4</strong>
</td>
<td colspan="2"><strong>Round 5</strong>
</td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="3"></td>
<td rowspan="3" class="connecter connecter2"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="7"></td>
<td rowspan="7" class="connecter connecter3"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td rowspan="15"></td>
<td rowspan="15" class="connecter connecter4"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="3"></td>
<td rowspan="3" class="connecter connecter2"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="3"></td>
<td rowspan="3" class="connecter connecter2"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="7"></td>
<td rowspan="7" class="connecter connecter3"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td rowspan="3"></td>
<td rowspan="3" class="connecter connecter2"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="1"></td>
<td rowspan="1" class="connecter connecter1"></td>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
</td>
<td width="20" id="spacer"></td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
css
table {
width: 60%;
height: 100%;
}
td {
border: 0px;
position:relative;
}
#team {
padding: 5px;
border: 1px solid black;
z-index:999;
background:#fff;
}
.dash-front {
position:absolute;
content:"----------";
letter-spacing: -2px;
right:-18px;
z-index:-999;
}
.dash-back {
position: absolute;
content: "----";
letter-spacing: -3px;
left: -15px;
z-index: -999;
}
#spacer {
padding: 5px;
}
.connecter {
border-left: 1px solid black;
/*transform:translateX(18px) scaleY(1.65);*/
}
td.connecter1{
transform-origin: center;
transform:translateY(1px) translateX(18px) scaleY(2.05);
}
td.connecter2{
transform-origin: center;
transform:translateY(1px) translateX(18px) scaleY(1.34);
}
td.connecter3{
transform-origin: center;
transform:translateY(1px) translateX(18px) scaleY(1.15);
}
td.connecter4{
transform-origin: center;
transform:translateY(2px) translateX(18px) scaleY(1.07);
}
#connecter:after {
/*content:"------";*/
letter-spacing: -2px;
}
td:first-child .dash-back{display: none;}
td:last-child .dash-front{display: none;}