0

トーナメント ブラケット システム用の「接続線 - ツリー構造」を作成しようとしています。

とはいえ、思ったより面倒です。私の目標は、 http://gyazo.com/4ea425163a8f3e6901b464085421c449のようなボックスを結ぶ線を持つことですが、画像は使用したくありません。

国境やその他のことでできると思いましたが、よくわかりません。今の私のコンセプトはあまり良くないように見えます。私が何をしようとすべきかについて誰か助けてもらえないかと思っていました.

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

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

どういうわけかborder:left、#connector でこれを右に移動し、スペーサーに何かを追加して正常に見えるようにする必要があると考えました。borderあなたが推奨するものを使用していますか？

4

1 に答える 1

0

jsフィドル

フルスクリーン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;}
于 2014-10-04T08:55:10.570 に答える