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

Question

我一直在尝试为锦标赛支架系统制作“连接线-树结构”。

然而，事情比我想象的还要麻烦。我的目标是用一条线连接盒子，例如 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;}