6

HTML テーブルと CSS のみを使用してトーナメント ブラケットを表示する方法はありますか?

これが私が達成したいことです：

トーナメント ブラケットの例

4

4 に答える 4

2

要素を要素内にラップすることができ、ネストされたposition: relative; divものを使用できますposition: absolute;div

デモ

これは明らかに面倒なプロセスですが、クラスを使用して特定のポイントを追跡できますが、これは純粋な CSS で実現できる最善の方法です。

最後dashed divに、次のスニペットを使用してその効果を達成できます

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

デモ 2

最後にtableなりましたが、これは良いことではありません

于 2013-09-02T04:51:51.797 に答える
0

https://stackoverflow.com/a/262584/1592764をご覧ください。jsfiddle と一緒にテーブルベースのブラケットのマークアップがあります。

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>

そして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;
}

編集:上記の CSS を変更して、目的の外観に近づけます。ここにjsfiddleがあります - http://jsfiddle.net/4KZ6T/236/

于 2013-09-02T04:45:11.393 に答える
0

上（勝者ブラケット）から下（ダブルエリミネーション...）まで数えて10列と30行のテーブルが表示されます

この形式でテーブルを作成しますが、ページのパディングとマージンを次のようにリセットしてください。 * {padding: 0; マージン: 0 自動;}

次のステップは、テーブルを div に配置し、#tableBody に ID を付けてから、Elem1 などを使用してテーブルの作業を開始することです...30 行と 10 列に達するまで

于 2013-09-02T04:47:05.477 に答える