无法使用CSS在表中创建正确的树结构

Question

我一直试图建立一个连接线 - 树结构＆＃34;对于锦标赛支架系统。

但是，它比我想象的更令人不安。我的目标是连接诸如http://gyazo.com/4ea425163a8f3e6901b464085421c449之类的框，但我不想使用任何图像。

我认为可以通过边界或其他方式完成，但我不确定。我现在的概念看起来并不太好，我想知道是否有人可以提供一些我应该尝试的帮助。

http://jsfiddle.net/zet5uh7f/1/

#spacer {
    padding: 5px;
}
#connecter { 
     border-left: 1px solid black;
}

我想我不得不在#connector上将此border:left向右移动，并在spacer上添加一些内容以使其看起来正常。使用border你会推荐什么？

Answer 1

jsFiddle

fullscreen jsfiddle

仅使用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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                <td rowspan="15"></td>
                <td rowspan="15" class="connecter connecter4"></td>
                <td colspan="2">&nbsp;</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">&nbsp;</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">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</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;}